EN

Syntax Highlighter

This syntax highlighter colors source code without installing anything: paste your code, choose the language and a light or dark color scheme and copy the finished HTML. The colors are built into the markup, so the code displays correctly in blogs, emails and documents without an extra stylesheet.

Source: WCAG 2.2 – Success Criterion 1.4.3 Contrast (Minimum): 4.5:1 for text (colors of both themes checked). Updated: .

Paste source code. The highlighting in the preview updates as you type.

Your text stays in your browser – it is not sent, not stored and not added to the address bar.

Preview

// Print a greeting
function greet(name) {
  const text = "Hello, " + name + "!";
  console.log(text);
  return text.length;
}

greet("World");
My Toolbox

Result

Highlighted HTML
<pre style="background:#ffffff;color:#1f2328;padding:12px 14px;border-radius:6px;overflow:auto;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;tab-size:4;margin:0"><code style="font:inherit"><span style="color:#57606a;font-style:italic">// Print a greeting</span> <span style="color:#cf222e">function</span> <span style="color:#8250df">greet</span>(name) { <span style="color:#cf222e">const</span> text = <span style="color:#0a3069">"Hello, "</span> + name + <span style="color:#0a3069">"!"</span>; console.<span style="color:#8250df">log</span>(text); <span style="color:#cf222e">return</span> text.length; } <span style="color:#8250df">greet</span>(<span style="color:#0a3069">"World"</span>);</code></pre>
Detected
JavaScript / TypeScript, 8 lines, 143 characters
The HTML carries the colors as style attributes and can be pasted anywhere HTML is allowed. Detection is an approximation based on patterns, not a full parser; with unusual syntax a spot may stay uncolored. The code is processed only in your browser, not stored and not sent.

How it is calculated

Syntax highlighting colors the building blocks of source code: keywords, strings, numbers, comments and function names each get their own color. This makes code easier to read, especially in texts, documentation and emails, where there is no editor with a color scheme.

What the highlighter can do

Safe and lossless

The source code is not changed, only split into sections and wrapped with color information. Characters such as < and & are escaped so that code containing HTML fragments cannot affect the rest of the page. To tidy code beforehand, use the JSON formatter, the SQL formatter or the HTML formatter.

Frequently asked questions

How do I color code for a blog post?

Paste the code, choose language and color scheme and copy the HTML from the result field. Insert it into the blog editor as an HTML block. The colors are in the markup, so no extra stylesheet is needed.

Can I paste the colored code into Word or an email?

Yes, usually via the preview: select, copy and paste, and the colors are kept. In programs that do not accept HTML, a screenshot of the preview helps.

Which languages are supported?

JavaScript and TypeScript, JSON, HTML with embedded script and style, CSS, SQL, Python and Bash. For any other language choose “Plain text”; then only the block formatting remains.

Is my code stored or sent anywhere?

No. Processing happens in your browser. The code is not in the address bar and is not stored.

Why are some parts not colored?

The highlighter recognizes patterns such as keywords, strings and comments but is not a full parser. Unusual syntax or language variants therefore occasionally stay black.

Sources and legal basis

As of: · Editorial policy

Related tools