Prism JS fold

Add code folding to JSON & JavaScript objects & arrays.

Table of Contents

• Setup
• Why Insert Details Tags?
• CSS
• Authors & License

This plugin parses the input to Prism and wraps {} & [] pairs in a <details> tag to provide code folding.

1. Adds a before-all-elements-highlight handler to Prism hooks.
2. Reads the input about to be highlighted by Prism.
3. Iterates over the characters finding interesting characters and inserting tags.
4. Updating the HTML before Prism then highlights it.

This algorithm should work for any C-like language though I haven't had the data set to test it on.

Note: This approach requires the Keep Markup plugin since we're adding tags before Prism highlights.

Setup

Install from npm:

npm i prism-js-fold

Require or import it after Prism.

import 'prismjs'
import 'prism-js-fold'

// commonjs
require('prismjs')
require('prism-js-fold')

or use via it a CDN:

<script type="text/javascript" src="https://unpkg.com/prismjs"></script>
<script type="text/javascript" src="https://unpkg.com/prismjs/plugins/keep-markup/prism-keep-markup.js"></script>
<script type="text/javascript" src="https://unpkg.com/prism-js-fold"></script>

See demo.html in this repo for a simple example of it working via CDN.

Why insert <details> tags?

This is the approach suggested by the Prism developer and requires the least parsing and coupling possible. Additionally, by using semantic HTML we avoid having to attach any JavaScript events, preventing any possibility of event related memory leaks.

CSS

The CSS required for layout in available in prism-js-fold.css included with this package. If you'd like to recolor toggle for your theme, provided a rule for code summary > span:first-child::before following the included CSS.

Authors & License

Nils Lundquist

CC-BY-SA-4.0