Syntax Highlight - Static (via Prism)

This page is the full Prism showcase for the example project. The highlight config now exposes the complete installed Prism language and plugin inventory, and this page is structured to exercise that wider configuration without forcing every language demo to load at once.

• The config now includes every installed Prism language, every installed Prism plugin, and every upstream Prism theme.
• The static page demonstrates every configured plugin directly, with extra runtime setup only where the Prism plugin itself requires it.
• The full language catalog is lazy-rendered by group so the page stays usable while still covering the entire configured set.

Configured Surface

The summary below is rendered from a generated catalog file built from node_modules/prismjs/components.json, so the page reflects the installed Prism package rather than a hand-maintained list.

Toolbar and Display Plugins

This first block demonstrates toolbar, show-language, copy-to-clipboard, line-numbers, and line-highlight together.

Combining multiple display plugins across different Prism themes may require custom CSS adjustments or plugin-level fixes.

Show Invisibles

Add show-invisibles to visualize spaces, tabs, and line endings inside the block.

Remove Initial Line Feed

Prism trims an initial blank line by default; use keep-initial-line-feed when that leading line is part of the example you need to show.

Highlight Keywords

The configured keyword classes are styled only in this demo area so the effect stays obvious instead of affecting every block on the page.

Whitespace, Line, and Brace Plugins

Normalize Whitespace

The first block is normalized. The second preserves the original spacing with no-whitespace-normalization.

Match Braces

Hover or click braces to inspect pair matching, then compare with the rainbow-brace variant.

Linkable Line Numbers

Open hashes like #syntax-linkable-lines.4 to jump straight to a line.

Fetch and Remote Source Plugins

File Highlight and Download Button

This block is fetched from a local asset file, highlighted after load, and given a download action in the toolbar.

JSONP Highlight

This demo uses a local JSONP-compatible asset so the plugin can be exercised without depending on a third-party endpoint.

Markup, Link, and Preview Plugins

Autolinker demo WPD demo Linkable line hash demo

Autolinker

URL-like text, email addresses, and similar linkable values are turned into clickable links inside the highlighted output.

WebPlatform Docs

This CSS sample uses the wpd plugin so selectors and properties become outbound docs links.

Inline Color, Previewers, and Data URI Highlight

Hover supported tokens to trigger previewers for colors, gradients, angles, easing curves, and times.

Keep Markup

This preserves trusted inline markup already inside the code block so annotations like <mark> or <strong> survive Prism highlighting.

const buildState = 'ready';
const toolbarLabel = `Prism ${buildState}`;

Unescaped Markup

The plugin converts the plain-text script block below into a Prism-highlighted code block without requiring HTML escaping in the source page.

Structured Output Plugins

Command Line

Avoid combining command-line with line-numbers; both plugins add their own left-side structure and the rendering conflicts.

Diff Highlight

The diff plugin highlights added and removed lines first, then applies the nested language grammar so changed JavaScript tokens are still colored inside the patch.

Treeview

This language renders filesystem-style trees with folder and file lines, which is useful when you want structure to read like a directory listing instead of plain text.

Runtime Setup Plugins

Some Prism plugins only become visible when the page gives them a little runtime setup. Those demos are rendered after load so the plugin configuration happens before Prism highlights them.

Custom Class

This block is highlighted after the page configures Prism.plugins.customClass.add(...), which adds extra classes to keywords and function tokens without replacing Prism's default classes.

Filter Highlight All

The filter plugin is configured to reject blocks inside .syntax-highlight-static__filter-skip. The first block is highlighted through highlightAllUnder; the second is intentionally skipped.

Autoloader

This block is inserted after load with an uncommon language so the autoloader plugin has a clear job to do. In the full catalog, the same mechanism is what makes the large language set practical.

Featured Languages

The full language catalog below covers the entire configured Prism language inventory. This featured set loads immediately so the page has a useful first screen before the larger catalog is expanded.

Full Language Catalog

Each group is loaded on first open. That keeps the page usable while still giving you a live Prism block for every configured language.

Attribution