Syntax Highlighter
Token-based code highlighting for seven languages with Tailwind-class output.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this syntax highlighter
- Paste your code into the input area.
- Pick the language — JavaScript, TypeScript, Python, JSON, CSS, HTML, or SQL.
- Press Highlight to colourise the snippet.
- Read the result inline, or click Copy HTML to grab the markup with Tailwind colour classes.
- Reset clears the form so you can try another snippet.
About this syntax highlighter
The syntax highlighter tokenises your code using a small set of regular-expression rules tuned for each supported language. Keywords are coloured purple, strings green, comments grey-italic, numbers orange, punctuation a neutral grey, and operators blue. HTML tags pick up a pink hue and their attributes amber; CSS treats selectors and property names separately so a stylesheet immediately looks like one. The highlighter runs entirely in your browser — no remote service is contacted — so you can safely paste production source.
The output is a span-per-token DOM with Tailwind colour classes, which means the highlighted markup pastes cleanly into blog posts, documentation, and slide decks that already use Tailwind. Because each token type maps to a single class name, you can also remap the palette by adjusting your Tailwind config; the structure of the output stays the same.
For example, highlighting the JavaScript snippet "const greet = (name) => `hello, ${name}`;" gives you "const" in purple, the template literal and its embedded expression in green, the arrow and equals in blue, and "name" left as plain identifier text. Copy HTML produces ready-to-paste <span class="text-purple-700">const</span> markup.
FAQ
- Which languages are supported?
- JavaScript, TypeScript, Python, JSON, CSS, HTML, and SQL. Each has its own keyword list and lexer rules tuned for that grammar.
- Does it depend on a remote highlighter or CDN?
- No. The token rules live in this app and run in your browser. The page works offline and never sends your code anywhere.
- What does Copy HTML produce?
- A flat string of <span class="...">token</span> elements using Tailwind colour utility classes. Paste it into any document that includes Tailwind and the colours come along.
- Will it format my code as well as colour it?
- No — that is the job of the Code Formatter or the language-specific formatters. The syntax highlighter only assigns colour classes to tokens.
- Why is my keyword not coloured?
- Each language has a fixed keyword set in the highlighter. Identifiers that are not in that set render in the default text colour, even if your editor would highlight them. SQL keywords are matched case-insensitively.
- Can I change the colour palette?
- Yes. The output uses Tailwind utility classes, so you can swap colour groups in your Tailwind config without touching the highlighter logic.