About the Code Syntax Highlighter
Most highlighting libraries emit class names and expect a stylesheet to travel with them. That breaks the moment you paste the block into a newsletter, a knowledge base article, a Notion page or a CMS field that scrubs your CSS. This highlighter writes the colours as inline style attributes on every span, so the block survives on its own with nothing else to load.
Eleven grammars are recognised: JavaScript, TypeScript, HTML, XML, CSS, JSON, SQL, Python, shell, Java and PHP. Each one is scanned with its own token rules, so comments, strings, numbers, keywords and function names get separate colours. Markup is handled differently from the rest: tags and attribute names are coloured inside the angle brackets while the text between elements stays neutral, which is what makes a pasted template readable. Pick Plain text when you only want the monospace frame with no colouring at all.
Two palettes ship with the tool, a light one tuned for white pages and a dark one for slide decks and code-first blogs. Line numbers are optional and are rendered as a non-selectable gutter, so a reader who copies the block gets the code without the digits. Inputs above 200,000 characters are refused; highlight the interesting function instead of the whole bundle. If you only need the code indented rather than coloured, the HTML Pretty Print and JavaScript Beautifier pages do that job.
How to use
- Paste a snippet into the left pane and pick its Language.
- Switch the theme to dark if the block will sit on a dark background.
- Press Copy to take the HTML, or Download to save it as a file you can embed.
Common questions
- Why does the copied HTML use inline styles instead of classes?
- Inline styles need no accompanying stylesheet, so the block keeps its colours in email clients, CMS editors and documentation tools that strip external CSS.
- Can I highlight a language that is not in the list?
- Pick Plain text to get the monospace frame without colouring. The token rules here cover the eleven languages in the dropdown only.
- Do line numbers get copied with the code?
- The gutter is marked non-selectable, so a normal text selection in the preview skips it. The HTML you copy from this page does include the number spans.
- Is the highlighting as accurate as a full parser?
- It is a token scanner, not a parser, so an unusual construct such as a regular expression that looks like division can be coloured wrongly. The structure of ordinary code is handled correctly.