What the code highlighter does
Paste code, pick the language — JavaScript, Python, HTML, CSS or JSON — and get it back with syntax colouring: keywords, strings, numbers and comments in distinct colours, as an editor shows them. Copy the result as styled HTML for a blog post, documentation page, slide, email or anywhere else that accepts rich text but has no highlighter of its own. Highlighting is done in your browser.
Why highlighting matters
Coloured tokens let a reader see structure before reading words: where strings begin and end, which words are keywords, where a comment starts. Studies of code reading show highlighting speeds comprehension and reduces errors in spotting mismatched quotes and brackets. For teaching material and documentation it is the difference between code that looks like a screenshot from a terminal and code that looks like it came from an editor.
What you get
| Output | Use |
|---|---|
| Rendered preview | Check the result and copy as rich text into Google Docs, Word, Notion, Medium, email |
| HTML with inline styles | Paste into a CMS, a static-site page, an HTML email or a Confluence page — no stylesheet needed |
Inline styles are used deliberately: the snippet carries its colours with it and does not depend on a CSS file at the destination.
Supported languages
| Language | Tokens recognised |
|---|---|
| JavaScript | Keywords, strings (incl. template literals), numbers, comments, regex literals |
| Python | Keywords, strings (incl. triple-quoted), numbers, decorators, comments |
| HTML | Tags, attribute names and values, comments, inline script/style |
| CSS | Selectors, properties, values, units, comments, at-rules |
| JSON | Keys, strings, numbers, booleans and null |
TypeScript, JSX and modern CSS features are largely handled by the JavaScript and CSS modes. For other languages, use a dedicated highlighter such as Prism, highlight.js or Shiki in your build.
Tips for readable snippets
- Format the code first — the JSON, SQL, HTML and CSS formatters on this site — so the highlighting has clean structure to work with.
- Keep lines under about 80 characters; long lines wrap awkwardly in documents and emails.
- Use a monospaced font at the destination (the HTML output sets one).
- For accessibility, do not rely on colour alone to convey meaning — the code itself remains readable in monochrome.
- Trim to the relevant lines; a 200-line paste hides the point.
Alternatives for the web
On a site you control, a JavaScript highlighter that runs on the page (Prism, highlight.js) or at build time (Shiki, which uses VS Code's grammars) gives more languages, themes and features such as line numbers and copy buttons. This tool fills the gap where you cannot add scripts or stylesheets: word processors, email, CMS editors that strip <script>, and quick one-off shares.