Syntax Highlighter to HTML

JavaScript and TypeScript go through the site’s JS tokenizer (also used by the minifier and beautifier): strings, template literals, regular expression literals, comments, numbers, keywords and punctuation, with a word followed by ( marked as a function name. CSS, JSON, Python, SQL, shell and HTML have small purpose-built scanners for their strings, comments, numbers and keywords — CSS properties, HTML tags and attributes, SQL keywords case-insensitively. Detection looks for characteristic syntax (a tag at the start, def / import, SELECT … FROM, a shebang, property: value) and falls back to a generic scanner.

Every token becomes <span class="hl-kind">text</span> with &, <, > and quotes escaped; plain tokens are left as bare text. A token spanning lines is split per line so line numbering and copy-paste stay clean. Classes mode adds a <style> block with a small default theme you can replace; inline mode writes the same colours as style attributes for e-mail and CMS fields that strip stylesheets. The wrapper is <pre class="hl"><code class="language-x">.

The scanners are lexers, not parsers: nested template literals in JS, heredocs in shell, CSS inside HTML, and languages not listed are coloured approximately or plainly. Colours are a fixed palette and not a claim of accessibility for your page — check contrast against your background. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.