A plugin for Prismjs add folding to JSON map and list Demo
This algorithm should work for any C-like language. JSON/JavaScript/Java is accepted by defualt, you can set environment variable PRISM_FOLD_HOOK_LANGUAGES to add more
This plugin parse tokens from Prism and wraps {} & [] pairs in a <details> tag to provide code folding
It add "after-tokenize" and "wrap" handlers to Prism hooks
- after-tokenize handler: identifies token with
type=="punctuation"andcontent=="{" || content=="[", turns flatten token list to nested tokens corresponding to folding - wrap handler: set details/summery tags before final stringify
Inspire by prism-js-fold, by using semantic HTML tag <details> no JavaScript events was attached
It hooks "after-tokenize" and "wrap" which called by Prism.highlight a Low-level function, therefore we can make better use of tokens split by prism itself instead of lots of regex matching. Besides, folding for direct call to Prism.highlight also works transparently
Install from npm
npm install prismjs-fold-jsonRequire or import it after Prism
const Prism = require('prismjs')
require('prismjs-fold-json')
// Returns a highlighted HTML string
const html = Prism.highlight(JSON.stringify({ a: [1, 2] }, null, 4), Prism.languages.json, "json")note: Add css import in main.js/main.ts if use in vue or react
import 'prismjs-fold-json/main.css'<!doctype html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="https://unpkg.com/prismjs@1.29.0/themes/prism-coy.min.css" />
<!-- import css file -->
<link rel="stylesheet" href="https://unpkg.com/prismjs-fold-json@1.x.x/main.css" />
</head>
<body>
<script src="https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js"></script>
<script src="https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<!-- import js file (after prismjs) -->
<script src="https://unpkg.com/prismjs-fold-json@1.x.x/index.js"></script>
</body>
</html>The details tag behaves differently in different browsers:
- in chromium>=128: new line created
- others: extra spaces added to every children lines
This repository should be compatible with these behaviors code. If not, try to set environment variable PRISM_IN_CHROME_LIKE (auto/new/old/none)