Speed Highlight Syntax Highlighting Library Demos

Download This Plugin Back To CSSScript.Com

Add fast, accurate code highlighting to docs, blogs, and admin panels with Speed Highlight JS and its tiny per-language packs.

Live Output
detected: js 0.00 ms
highlightText output
tokenize summary

Inline Code

Inline markup stays inside text flow while using the same tokenizer and theme.

Use highlightElement(node, "js", "inline") for inline JavaScript, .shj-inline { display: inline-block; } for short CSS, and npm i @speed-highlight/core for shell commands.

Static Blocks

These blocks are highlighted through one call to highlightAll.

HTTP one-line mode

GET /v1/projects?limit=12 HTTP/2

Diff multiline mode

@@ -1,5 +1,5 @@ - const cache = false + const cache = true export const mode = "browser"

Custom Language

loadLanguage adds a new grammar at runtime, then highlightElement renders it like any built-in language.

Workflow grammar

stage publish when traffic >= 2400 run audit --scope page retry 2 notify editor

Custom grammar definition

loadLanguage("workflow", { default: [ { type: "kwd", match: /\b(stage|when|run|retry|notify)\b/g }, { type: "num", match: /\b\d+\b/g }, { type: "oper", match: /[>=-]+/g } ] });

Language Coverage

Each chip maps to a built-in shj-lang-* class supported by the browser build.