Convert JavaScript, TypeScript, HTML, CSS, Python

Color common JavaScript, TypeScript, HTML, CSS, JSON, Python, or SQL tokens for display.

freeworks offlinenothing uploaded
ToolSyntax Highlighter
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Language-specific regular-expression patterns wrap keywords, strings, numbers, comments, tags, and properties in theme classes after HTML escaping. The result is presentation markup, not a parser or validator.

  • Auto detection covers common snippets.
  • Escaping protects source text before span insertion.

Worked example

Highlight JavaScript
Convert JavaScript code to syntax-highlighted HTML
Input
											const name = 'World';
console.log(`Hello ${name}`);
Output
												<pre style="background:#1e1e1e;color:#d4d4d4;padding:16px;border-radius:8px;overflow-x:auto;font-family:'Fira Code',monospace;font-size:14px;line-height:1.5;"><style>.kw{color:#569cd6}.str{color:#ce9178}.num{color:#b5cea8}.cmt{color:#6a9955;font-style:italic}.tag{color:#569cd6}.attr{color:#9cdcfe}.sel{color:#569cd6}.prop{color:#9cdcfe}.val{color:#ce9178}</style><code><span class="kw">const</span> name = <span class="str">'World'</span>;
console.log(<span class="str">`Hello ${name}`</span>);</code></pre>

When to use this

Documentation pages, browser editors, and README generators highlight snippets.

Edge cases

  • A keyword inside a string can be highlighted incorrectly.
  • Nested template literals and embedded languages exceed simple patterns.
  • HTML entities in source must be escaped before markup is inserted.

References