Syntax Highlighter: Code to HTML with Inline Styles
Highlight JavaScript, Python, SQL, HTML, CSS and 13 more languages with auto-detect, then copy self-contained HTML with inline styles in a light or dark theme, or with highlight.js classes. Nothing is uploaded.
Paste or type code to see it highlighted.
About the Syntax Highlighter
The Syntax Highlighter colours source code and turns it into HTML you can paste into a blog post, an email, documentation, a slide or a CMS that has no code-highlighting plugin. Paste code, pick one of 18 languages or leave it on Auto-detect, and a live preview shows exactly the HTML you will copy. Choose a Light or Dark theme, line numbers, a tab width and whether long lines wrap. Everything runs in your browser; your code is never uploaded.
How to use it
Steps
- Paste or type code into Code.
- Leave Language on Auto-detect, or pick the language yourself. With auto-detect the page shows which language it chose.
- Pick a Theme, a Tab width, and turn on Line numbers or Wrap long lines if you want them. The preview updates as you go.
- Press Copy next to HTML with inline styles to copy a self-contained block, or next to HTML with highlight.js classes if your page already loads a highlight.js theme.
Privacy
Highlighting happens entirely in your browser. Your code is never uploaded to our servers or sent anywhere else, and nothing is kept once you close or reload the tab.
Choosing the output
HTML with inline styles
Every colour is written into a style attribute on the element it colours, and the surrounding pre element carries the background, font, tab size and wrapping. The block looks the same wherever it is pasted, with no stylesheet to add. This is the right choice for email, rich-text editors and website builders that strip <style> tags and class names.
HTML with highlight.js classes
The markup is the plain highlight.js output: span elements with class names such as hljs-keyword and hljs-string, inside <pre><code class="hljs language-…">. It is smaller and lets your own stylesheet decide the colours, so use it on a site that already includes a highlight.js theme. Line numbers, tab width and wrapping apply to the inline-style output only.
Languages
JavaScript, TypeScript, JSON, HTML and XML, CSS, Python, Java, C, C++, C#, Go, Rust, PHP, Ruby, SQL, Bash, YAML and Markdown. Auto-detect tries each of these grammars and keeps the one that recognises the most structure. Short snippets can be ambiguous, a few lines of C and C++ look identical for example, so pick the language yourself when the guess is wrong.
Good to know
- The highlighter colours code; it does not change it. To fix indentation first, run the code through the Code Formatter, the HTML Formatter or the JSON Formatter, then paste the result here.
- Characters such as
<,>and&in your code are escaped, so the copied HTML shows them as text and never runs them as markup. - Inputs are limited to 200,000 characters so that auto-detect stays quick. Split larger files or pick the language yourself.
- The Light and Dark themes use the colours of the GitHub themes that ship with highlight.js, which are designed for readable contrast on white and on near-black backgrounds.
Open-source credits
- Highlighting comes from highlight.js by Ivan Sagalaev and contributors, BSD 3-Clause licence. Only its core and the 18 listed grammars are loaded.
- The Light and Dark colours are taken from the "GitHub" and "GitHub Dark" themes distributed with highlight.js (colours from github.com, maintained in the highlight.js project), BSD 3-Clause licence. The conversion to inline styles is written for this site.
Frequently asked questions
How do I paste highlighted code into an email or a rich-text editor?
Copy the HTML with inline styles. Each colour sits in a style attribute on its own element, so editors and email clients that remove stylesheets and class names still show the colours. Paste it wherever the editor accepts HTML, or into an HTML block or source view.
What is the difference between the two copy options?
HTML with inline styles is self-contained and looks the same anywhere. HTML with highlight.js classes contains only class names such as hljs-keyword, so it is smaller but needs a highlight.js theme stylesheet on the page to show any colour.
Why did auto-detect pick the wrong language?
Auto-detect scores each supported grammar against your code and keeps the best match. Short snippets often fit several languages, for example C and C++, or JavaScript and TypeScript. Choose the language from the list and the highlighting follows it exactly.
Is my code uploaded?
No. Highlighting runs in your browser with highlight.js, and your code is never sent to a server. Closing or reloading the tab discards it.
Is it safe to paste HTML or script code?
Yes. The code is escaped before it is coloured, so tags such as script or img appear as text in the preview and in the copied HTML and are never run.