Syntax Highlight
Turn code into highlighted HTML for blogs, docs, and CMS.
Convert source code to highlighted HTML for blogs, documentation, and CMS. Auto-detects language. Free, offline, runs entirely client-side. Read more Show less
What is syntax highlighting?
Syntax highlighting applies colors and formatting to source code so that keywords, strings, comments, and numbers are visually distinct. It is used in documentation, blog posts, README files, code review tools, and anywhere code appears alongside regular text.
This tool takes raw code and produces HTML with the standard hljs-* class names used by highlight.js. Paste the HTML into your blog, documentation site, or CMS and the code will render with colors and structure instead of as a wall of gray text.
How to use
Paste your code, pick a language (or leave it on "Auto-detect"), and the tool produces highlighted HTML. Click Copy HTML to get the markup, then paste it into any HTML-aware field: a blog post editor, a documentation page, a CMS "custom HTML" block, or a static site template.
Every snippet is processed in your browser. Nothing is uploaded.
Themes
The output HTML uses neutral hljs-keyword, hljs-string, and similar class names. The actual colors come from a CSS theme that you load alongside the HTML.
To add colors, include one of the highlight.js stylesheets on your site. The most common are github.css (light), github-dark.css (dark), and atom-one-dark.css (dark, colorful). They are available on any CDN or in the highlight.js package.
Example: <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/styles/github.min.css">
The live preview in this tool uses a built-in theme that adapts to light and dark mode, so you can see the highlighting work without adding any CSS to your site.
Languages
The auto-detect mode guesses the language from the code's structure. It works well for large, distinctive snippets and less well for short ones. When auto-detect gets it wrong, pick the language explicitly.
This tool ships the highlight.js "common" bundle, which covers the ~35 languages that appear most often in documentation: JavaScript, TypeScript, Python, Java, C, C++, C#, Go, Rust, Ruby, PHP, Swift, Kotlin, HTML/XML, CSS, SCSS, JSON, YAML, Markdown, SQL, Bash, Shell, PowerShell, Dockerfile, and more.
For languages outside this list, use a full highlight.js build or a different highlighter.
FAQ
Is the output safe to paste on my site?
Yes for the code content. highlight.js escapes HTML entities in the source before adding its own markup, so no code can break out of the <pre> block. This makes the output safe to paste into a public page even if the code came from an untrusted source.
Do I need to include JavaScript on my site?
No. This tool produces static HTML with class names. The colors come from CSS alone. You only need to include a stylesheet, not the highlight.js library.
Can I highlight code inline (not in a block)?
The tool produces block-level output. For inline highlighting, wrap the snippet in a <code> tag instead of a <pre><code> tag and apply the same CSS. The class names are the same.
Why does my auto-detected language look wrong?
Auto-detect works by scoring language grammars against the code. Short snippets often match several grammars equally well, and the tool picks one arbitrarily. Choose the language explicitly for short code.
Can I customize the colors?
Yes. The output uses only hljs-* class names. Write your own CSS rules targeting those classes to override any theme. The full list of classes is documented on the highlight.js website.
Does this work for very large files?
Yes up to a few hundred kilobytes. Beyond that, the browser may freeze briefly during highlighting. For very large files, run highlight.js on the server instead.
Can I highlight multiple snippets at once?
This tool handles one snippet at a time. To highlight several, paste them one after another and copy each result separately, or use a script with the highlight.js API.
Command line equivalent
# Node with highlight.js
npm i highlight.js
node --input-type=module -e '
import hljs from "highlight.js";
const html = hljs.highlight("const x = 1;", { language: "javascript" }).value;
console.log(html);
'
# Auto-detect
node --input-type=module -e '
import hljs from "highlight.js";
const html = hljs.highlightAuto("def foo(): pass").value;
console.log(html);
'
# Python with pygments
pip install pygments
pygmentize -l python -f html -O full -o out.html input.py
# Command line
# highlight.js CLI
npx highlight.js input.js --out-format html