PrismJS / PrismJS/prism

Support code-folding for large code blocks / multi-file code snippets

Open
#4,042 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
13k
Forks
1.4k
Avg merge
15h 36m
Merged PRs (30d)
3

Description

What’s the request

Add optional support for code-folding / collapse-expand in PrismJS for large code blocks or multi-file code snippets.

Motivation / Why this is useful

For long code blocks (e.g. 200+ lines) or when embedding multiple files in a single page, scrolling becomes cumbersome and readability suffers.

Code-folding would help maintain clean layout and improve usability when viewing big code samples (especially for documentation, tutorials, or code reviews).

Many other syntax-highlighters support folding — adding it to PrismJS would make it more feature-rich and user-friendly.

What I propose / Feature details

Provide an optional plugin or built-in mechanism to allow folding of code blocks: by default collapsed (first few lines visible), with toggle to expand.

Support collapse per block — not mandatory: user/developer must opt-in (e.g. via data-attribute or config) so it doesn’t break lightweight usage for small snippets.

Ensure that syntax highlighting still works correctly when folded/unfolded, and that HTML output remains valid (colors, line numbers, etc.).

Additional context / Use-cases

Useful for documentation sites, blogs, tutorials where large code examples are common.

Helpful when embedding multiple code examples on one page.

Could optionally integrate with existing Prism plugins (if feasible) or be developed as a new plugin to maintain modularity.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing Prism’s existing plugins and the highlighting and line-number behavior for large or multi-file code blocks. Define an opt-in folding mechanism, then verify that collapse and expand preserve syntax highlighting, valid HTML output, and per-block behavior without affecting small snippets.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.