Add code-folding plugin for large code blocks #4046
+56,124
−92,003
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Move to separate modules: - `highlightAll()` - `highlightElement()` - `highlight()` - `stringify()`
Was fixed in PrismJS#3949 (in the `simplify` branch). Move it here to make testing easier.
- Move `tokenize()`, `_matchGrammar()` (and related code), and `resolve()` to separate modules. - Ditch the `tokenize` symbol in favor of the `$tokenize` special property. Since symbols are excluded from the `for…in` loop, and `$tokenize` is not a symbol, to preserve the previous behavior, we need to handle it in `_matchGrammar` explicitly. - Switch from `[tokenize]` to `$tokenize` in languages. --- Co-authored-by: Dmitry Sharabin <dmitrysharabin@gmail.com>
Now, the user can include Prism the way they used to (except v2 now uses the Autoloader plugin under the hood, so more languages can be highlighted right out of the box): ```html <link rel="stylesheet" href="themes/prism.css" /> <script src="prism.js"></script> ``` Besides, they have access to the Prism instance via `globalThis`.
… global bundle Co-Authored-By: Dmitry Sharabin <dmitrysharabin@gmail.com>
…smJS#3984) Co-authored-by: Lea Verou <lea@verou.me>
- Ditch the `global` bundle in favor of `prism.global.ts` that is output to `prism.js` (see below) - Remove chunks Rel to PrismJS#3984. The global bundle generated only one file (`prism.js` from `auto-start.ts`) in the IIFE format. When `prism.js` was included on a web page, it created an instance of Prism (as it should) and exposed it. The plugins and languages _were not_ part of the global bundle. When we included one of those plugins, we imported an instance of Prism (`globalPrism`) from a module that is _part of another bundle_, which the global bundle was unaware of. During that process, a new instance of Prism was created, and the imported plugin attached itself to that instance, not the one we had expected (the first one instantiated). The global bundle and the plugins didn't share the same modules, since they were parts of different bundles. This should be fixed now. Co-authored-by: Lea Verou <lea@verou.me>
…3987) * Autolinker * Autoloader * Command Line * Copy to Clipboard * Custom Class * Data URI Highlight * Diff Highlight * Download Button * File Highlight * Filter Highlight All * Highlight Keywords * Inline Color * JSONP Highlight * Keep Markup * Line Highlight * Match Braces * Normalize Whitespace * Previewers * Show Invisibles * Show Language * Toolbar * Treeview Icons * Unescaped Markup * WPD
Before, when using the global bundle, we get the `Uncaught (in promise) TypeError: Failed to resolve module specifier './index.js'. The base URL is about:blank because import() is called from a CORS-cross-origin script.` error.
…ismJS#3990) * Introduce the concept of base language Co-authored-by: Lea Verou <lea@verou.me> * Improve the type system So that authors defining a language shouldn’t add `!` everywhere they refer to `base`. --------- Co-authored-by: Lea Verou <lea@verou.me>
Via `npm audit fix`
* Transform actionscript * Transform arduino * Transform cilkcpp * Transform birb * Transform aspnet * Transform cilkc * Transform crystal * Transform d * Transform dart * Transform firestore-security-rules * Transform flow * Transform fsharp * Transform glsl * Transform gml * Transform go * Transform gradle * Transform groovy * Transform haxe * Transform hlsl * Transform idris * Transform java * Transform javascript * Transform jolie * Transform jsdoc * Transform json5 * Transform jsonp * Transform kotlin * Transform less * Transform markup * Transform mongodb * Transform n4js * Transform objectivec * Transform opencl * Transform phpdoc * Transform plsql * Transform processing * Transform protobuf * Transform purebasic * Transform purescript * Transform qore * Transform qsharp * Transform racket * Transform reason * Transform ruby * Transform sass * Transform scala * Transform scss * Transform solidity * Transform sparql * Transform sqf * Transform squirrel * Transform textile * Transform v * Transform vala * Transform vbnet * Transform velocity * Transform wiki * Transform xeora * Transform xquery * Transform bison * Transform c * Transform chaiscript * Transform javadoc * Transform markdown * Transform csharp * Transform parser
* Transform `src/core/prism.ts` * Transform `src/core/stringify.ts` * Transform `src/core/classes/hooks.ts` * Transform `src/core/highlight.ts` * Transform `src/core/highlight-all.ts` * Transform `src/core/highlight-element.ts` * Transform `src/config.ts` * Transform `src/core/tokenize/tokenize.ts` * Transform `src/core/classes/prism.ts` * Transform `src/core.ts` * Transform `src/global.ts` * Transform `src/index.ts` * Transform `src/auto-start.ts` * Transform `src/util` * Transform `src/shared` * Transform `src/prism.global.ts` * Transform `src/shared/languages` * Transform `src/shared/meta` * Transform `src/shared.ts` * Transform `src/core/classes/token.ts` * Transform `src/core/tokenize/util.ts` * Transform `src/core/tokenize/match.js` * Transform `src/core/registry.ts` * Transform `src/load-languages.ts` * Transform `src/core/linked-list.ts` * Transforming `tests/` * Transforming `tests/core` * Transforming `tests/helper` * Partially transform languages * Transform the rest of the languages * Remove TS files from `src/languages` * Remove TS files from `tests/` * Remove TS files from `tests/core` * Remove TS files from `tests/helper` * Transform plugins and remove corresponding TS files * Transform `tests/plugins` * Tests don't depend on TS anymore * Remove TS files from `src/` * Remove TS files from `src/shared` * Remove TS files from `src/shared/languages` * Remove TS files from `src/shared/meta` * Remove TS files from `src/util` * Remove TS files from `src/core` and sub-directories * Fix imports in `types.d.ts` * Transform `scripts` * Transform `benchmark` * Adjust ESLint rules * Build types * Get rid of TS We use it to build types only. * Run `npm run build` We updated the comment in the build script, so it should be updated in the corresponding CSS file. * Improve types for hooks * Improve types for token * Improve types for Prism config * Improve types for registry * Improve types for Prism class * Improve types for highlight methods * Improve types for stringify * Improve types for linked list * Adjust types in tokenize functions * Fix types in `load-languages.js` * Improve types of util functions * Adjust types for shared/languages * Fix types in plugins * Fix types for tests * Fix types for tokenize string * Fix types for language definitions * Another iteration on types * And one more * And a bit more fixes * [plugins] Add missed template specifier * [languages] Add types to `export default`s * Fix types in scripts * Remove `@private` and `@default` to correctly generate types * Some improvements to types in tests * [benchmark] Some tweaks of types * Re-enable types check in JS files - Restore `tsconfig.json` but allow implicit `any` - Add the `typecheck` NPM script - Adjust the build script (use `tsconfig.json` and remove redundant code) * Fix type inconsistencies in core files and plugins * Fix some (fixable) TS errors * Fix the rest of the type errors in language definitions
Now, it’s aligned with language and theme names. - Adjust other plugins' imports and docs, scripts, test helpers, and `components.json` accordingly - Add the corresponding export rule to `package.json` - In most cases, it's a simple file rename
- Restore `tsconfig.json` for tests - Adjust types and fix TS errors - Add corresponding NPM scripts
…mJS#4016) It allows referencing required languages inside grammar definitions via the `language` property of an options object passed to the `grammar()` function. So, we don't need to expose the `getLanguage()` function to grammar authors. - Don't pass `getLanguage()` to the `grammar()` function - Don't mutate the language proto when the base grammar is specified (firstly, it's a bug, secondly, we don't want to define the base language as a property of the `languages` object—it's for the required languages only) - Add new utility functions for working with objects (authored by @LeaVerou) - Improve the type system to support the updated signature of `grammar()` - Update definitions of languages previously relied on `getLanguage()` Co-authored-by: Lea Verou <lea@verou.me>
- Add utils authored by @LeaVerou: `isObject()`, `isPlainObject()`, `deepMerge()`, `deepClone()`, `betterAssign()`,`insert()`, and `insertAfter()`. Update `insertBefore()` accordingly. - Update `extend()` to support new special properties (`$insertBefore`, `$insertAfter`, `$insert`, `$delete`, and `$merge`) that allow defining grammars more declaratively and adding a new `grammarPatch()` util (all authored by @LeaVerou). See PrismJS#3927 for details. - Adjust TS types and config to support the new API. - Fix TS errors. No breaking changes are introduced.
This plugin adds support for collapsing and expanding large code blocks to improve readability when viewing documentation, tutorials, or code reviews with multiple code examples. Features: - Automatic collapse/expand buttons for code blocks with 10+ lines - Configurable auto-folding for very large blocks (default 50+ lines) - Data attributes for customization (data-fold, data-fold-threshold) - Smooth transitions and accessible keyboard controls - Works alongside other plugins (line numbers, toolbar, etc) - Shows line count and gradient fade effect when folded Usage: Add the code-folding class to pre or code elements to enable the feature. Resolves issue PrismJS#4042
✅ Deploy Preview for dev-prismjs-com ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
JS File Size Changes (gzipped)A total of 327 files have changed, with a combined diff of -33.02 KB (-100.0%). Details
|
Author
|
Implemented code-folding plugin for issue #4042. Adds collapse/expand buttons to large code blocks (opt-in via "code-folding" class). |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR implements a code-folding plugin to address issue #4042, adding support for collapsing and expanding large code blocks to improve readability.
What this adds
A new optional plugin that allows users to collapse/expand code blocks, making it easier to manage long code samples in documentation, tutorials, and code reviews.
Features
code-foldingclass - doesn't affect existing codedata-foldanddata-fold-thresholdattributesUsage