Code Highlighter
Paste code, choose a language, see the syntax-highlighted preview, then copy the embeddable HTML — all in one step.
Last updated: May 26, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is Code Highlighter?
Syntax highlighting colours different parts of code — keywords, strings, comments, numbers — so the structure is easier to read at a glance. It is essential for technical blog posts, documentation, tutorials, and any web page that displays code snippets.
This tool applies token-based highlighting for eight common languages and outputs a self-contained HTML block — a `<pre><code>` element with inline `style` attributes on each coloured token — that you can paste directly into any HTML page, CMS, or email without loading an external highlighting library.
The colour scheme follows a VSCode-inspired dark theme. Keywords appear in blue, strings in orange, comments in green, and numbers in mint — making the highlighted code readable on both light and dark backgrounds.
How to Use Code Highlighter
Select the programming language from the dropdown.
Paste or type your code in the input panel.
The Preview tab shows the coloured result in real time.
Switch to the HTML tab to see the embeddable markup.
Click "Copy HTML" to copy the output and paste it into your page.
Common Use Cases
- Adding highlighted code blocks to a blog post without a build-time syntax highlighter.
- Pasting highlighted code into a CMS that strips script tags or CSS.
- Generating a self-contained HTML code block for an email newsletter.
- Demonstrating a code snippet in documentation with correct coloring.
- Creating a highlighted snippet for a Stack Overflow answer or GitHub issue.
Example Input and Output
A JavaScript arrow function is highlighted and the embeddable HTML is copied.
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5<span style="color:#569cd6">const</span> add = (a, b) => a + b;
console.log(add(2, 3)); <span style="color:#6a9955">// 5</span>Privacy
All processing happens in your browser. No code is sent to a server.
Embedding
The HTML output is a self-contained <pre><code> block with inline styles. It works in any context that accepts HTML — CMS rich text fields, email HTML, Notion, and static HTML pages.
Dark vs light backgrounds
The generated block has background: #1e1e1e (dark). If you want the code on a light background, change the background property on the <pre> element and adjust token colours accordingly.