Dev tools

Syntax highlighter

Highlight code as HTML spans or ANSI colors, for js/python/json/html/css/sql. Regex-tokenizer based and approximate, not a full language grammar. Runs on your device.

Runs on your device. The file is never uploaded.

Syntax highlighter wraps each token of a pasted snippet in a span with a tok- class, or in ANSI colour codes. Six languages are covered, js and python plus json, html, css and sql, with ampersands and angle brackets escaped on the way out. No stylesheet ships with the classes, so the HTML renders plain until you write the rules.

Options

Questions

Which languages can it highlight?

Six: js, python, json, html, css and sql. Each has its own keyword list except html and css, which have none, so in those two you still get strings, comments and numbers colored but nothing marked as a keyword. The tokenizer itself is shared by all six.

What does the HTML output look like?

A pre and code block with each token wrapped in a span carrying a class: tok-keyword, tok-string, tok-comment, tok-number, tok-ident, tok-punct or tok-plain. Whitespace is emitted bare, without a span. The characters &, < and > are escaped, so your code renders as code instead of being parsed as markup.

Does it come with a stylesheet?

No. You get the classes and choose the colors yourself, which is why the output drops into an existing theme without a fight. Write rules for .tok-keyword, .tok-string, .tok-comment, .tok-number, .tok-ident and .tok-punct in your own CSS and the same markup works in light and dark.

What is the ANSI option for?

Terminal output. It wraps each token in ANSI color codes instead of spans: keywords in magenta, strings in green, comments in bright black, numbers in cyan, and everything else in the default color. Paste the result into a terminal, or into a script that prints colored code.

How accurate is the tokenizing?

It is a set of regular expressions, not a language grammar. Strings, line and block comments, numbers, identifiers and punctuation are found by shape alone, so a JavaScript regex literal can be read as division, template interpolation is treated as part of the string, and a # in a JavaScript line is read as a comment because the same comment patterns apply to every language.

Can it highlight a whole file?

The code goes into a field on the page rather than being uploaded, so it suits a snippet more than a large source file. There is no line numbering and no length limit, and your original line breaks are preserved exactly in both output formats.

Related Dev tools