Syntax highlighter

Paste code and convert to highlighted HTML locally in your browser. Each language is its own small component — TypeScript’s is 9.34 kB of WebAssembly — chained with an HTML escaper and a Night Owl stylesheet.

Language Enter code

Preview

Output HTML

The output embeds its own <style>, so it pastes straight into a blog post or email with no external stylesheet.

Download #

html-code-syntax-highlight-zig.wasm — 7.34 kB
html-code-syntax-highlight-c.wasm — 5.77 kB
html-code-syntax-highlight-bash.wasm — 7.01 kB
html-code-syntax-highlight-tsx.wasm — 9.34 kB
html-code-syntax-highlight-html.wasm — 15.98 kB
html-code-syntax-highlight-css.wasm — 7.43 kB
html-code-syntax-highlight-wasm.wasm — 7.60 kB
html-escape.wasm — 636 bytes
html-add-highlight-stylesheet-night-owl.wasm — 1.89 kB

CLI equivalent #

The highlighters transform whole HTML documents: each rewrites <pre><code class="language-…"> blocks for its language and leaves everything else untouched, so they chain safely.

qip run components/text/html/html-code-syntax-highlight-zig.wasm \
  components/text/html/html-code-syntax-highlight-css.wasm \
  components/text/html/html-code-syntax-highlight-bash.wasm \
  components/text/html/html-add-highlight-stylesheet-night-owl.wasm \
  < page.html > highlighted.html