Highlighted code that works anywhere
Most syntax highlighting on the web is done by JavaScript libraries and CSS themes loaded on the page. That is fine for your own site, but it fails where you cannot add scripts or stylesheets: a hosted blog platform, a CMS rich-text field, a newsletter or a slide. This code highlighter produces self-contained HTML: every color is an inline style attribute, so the snippet looks the same wherever you paste it.
Example
A line of JavaScript:
const total = items.reduce((sum, x) => sum + x.price, 0); // centsbecomes a <pre> block where keywords, strings, numbers, comments and function names are wrapped in spans such as:
<span style="color:#cf222e">const</span> total = items.<span style="color:#8250df">reduce</span>((sum, x) => …Supported languages
JavaScript, TypeScript, JSON, Python, PHP, Java, C, C++, C#, Go, Rust, Ruby, Kotlin, Swift, SQL, CSS, HTML, XML and shell scripts. The highlighter recognizes each language's keywords, strings, comments, numbers and function calls; for HTML and XML it colors tags, attributes and values.
It is a lightweight, token-based highlighter rather than a full language parser. The result is accurate for typical code, but unusual constructs, such as a regular expression containing quote characters, may occasionally be colored differently than in an IDE.
Options
- Language – choose the one that matches your code for correct keywords.
- Theme – a light theme with a GitHub-like palette or a dark theme inspired by One Dark. Pick the one that contrasts with the page where the code will appear.
- Line numbers – adds a gutter with line numbers, useful for tutorials that refer to specific lines.
Where to use it
- Blog posts and documentation on platforms that strip scripts or custom CSS.
- HTML email newsletters, where inline styles are the only reliable styling method.
- Presentations and word processors – open the preview, copy it and paste as rich text to keep the colors.
- Static pages where you want highlighted code without loading a highlighting library.
How it compares with highlighting libraries
Libraries such as Prism, highlight.js and Shiki run on your site and style code with CSS classes, which keeps pages small and lets you switch themes globally. They are the better choice when you control the website template. This tool is for the opposite situation: one-off snippets that must look right in places where you control nothing but the HTML itself. The output also has no dependencies, so it will keep rendering correctly years from now, even if the platform changes its themes.
Tips
- Format the code before highlighting; the highlighter keeps your whitespace exactly. The JavaScript formatter and other formatters on this site can help.
- Keep snippets short and focused. Long listings are easier to read in a repository link.
- Inline styles make the HTML larger than class-based output. That is the price of portability and is rarely a problem for snippets.
To simply read a file with highlighting and line numbers, use the source code viewer. For JSON specifically, the JSON syntax highlighter is tuned for that format. Code is processed in your browser and never uploaded.