Free code syntax highlighter: how to highlight code online
A code syntax highlighter colours the keywords, strings, comments and numbers in a snippet so it is easier to read. To highlight code here, paste it into Your Code, choose a Language and a Theme, and the Preview updates as you type. Then copy the result as plain text, rich text or embed HTML, or download it as an HTML page, a PNG image or an SVG image.
The Language menu lists 55 languages plus Plain text, and you pick the language yourself. Highlighting is pattern-based rather than a full parser, so unusual syntax can occasionally be coloured imperfectly. There are seven built-in themes, GitHub Dark, GitHub Light, Monokai, Dracula, Nord, Solarized Dark and Solarized Light, and you can edit 12 colours to save your own.
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). If the indentation is messy, tidy it first with the JavaScript beautifier, HTML beautifier, CSS beautifier or SQL formatter, then paste the result here.
Table of Use: from snippet to the format you need
| Goal | Click | What you get |
|---|---|---|
| Code block in a blog post or CMS page | Copy Embed | One div with inline styles to paste into a raw HTML block; no stylesheet or script needed |
| Snippet in Word, Google Docs or an email | Copy Highlighted | Rich text with colours on the clipboard, plus plain text for editors that ignore formatting |
| Picture for slides or a social post | Export PNG, with PNG size 2x or 4x | A file named like code-python.png |
| Sharp figure for a document or print | Export SVG | A vector image, code-python.svg, whose code stays real text |
| Stand-alone page to open or share | Export HTML | A complete page, code-python.html, with the theme colour as its background |
| Draw attention to a few lines | Highlight Lines: 1,3-5,7 | Those lines shaded in the preview and in every export |
| Match a brand or editor palette | The palette button, then Save theme | Your own theme under Your themes, stored in this browser only |
| Original code back, untouched | Copy Code | Your text exactly as typed, with no colours or markup |
Working with data rather than code? Check and tidy it first in the JSON formatter or the XML formatter, then colour it here with the JSON or XML language.
Features
- 55 languages plus Plain text. Each has its own comment, string, keyword and number rules; HTML, XML, CSS, JSON, YAML and Markdown get rules for tags, properties, keys and headings. Load Sample has an example for 19 of them and loads a JavaScript sample for the rest, telling you so.
- Seven themes and your own. The custom editor changes 12 colours, saved under a name of up to 40 characters. Saved themes live in your browser's localStorage and can be deleted again.
- Line numbers and highlighted lines. Show Line Numbers is a checkbox, and a final newline does not add an empty numbered line. Numbers in the embed are marked not selectable, so copying the code from a web page skips them.
- Appearance. Font size 10 to 28px, line height 1.2 to 2.2, padding 0 to 64px and corner radius 0 to 32px, under the Appearance section.
- Contrast check. If a theme has text colours below the WCAG AA ratio of 4.5:1, a notice names the worst pair and offers Raise low-contrast colours to 4.5:1, which changes lightness and keeps the hue.
- Five ways out. Copy Code, Copy Highlighted, Copy Embed, Export HTML, and Export PNG or SVG. HTML and embed output wrap long lines; PNG and SVG widen to fit the longest line, with tabs shown as four spaces.
- Limits stated. PNG is capped by the browser canvas size of 16,384 pixels per side. The tool does not detect the language, and it never reformats your code.
For snippets inside a README or article, draft the page in the Markdown editor or convert it with the Markdown to HTML converter.
How to use the code syntax highlighter
- Paste your code into Your Code, or click Load Sample to see an example.
- Choose the Language. Nothing is detected automatically, so pick the one that matches.
- Choose a Theme. Click the palette button beside it to edit colours, type a Theme name and click Save theme.
- Optional: type line numbers into Highlight Lines, switch Show Line Numbers on or off, and open Appearance to change size, spacing and corners.
- Check the Preview. If a Low contrast notice appears, tick Raise low-contrast colours to 4.5:1.
- Click Copy Code, Copy Highlighted, Copy Embed, Export HTML, Export PNG (choose PNG size first) or Export SVG.
Who can use it
- Bloggers and technical writers who need a coloured code block without installing a plugin, then a clean URL with the slug generator.
- Teachers and trainers putting code on slides or worksheets as an image or rich text.
- Developers sharing a snippet in a document, an email or a social post, with the important lines marked.
- Support and documentation teams who paste configuration into guides, in YAML or JSON, Nginx, Apache or Dockerfile form.
- Students formatting assignments and lab reports with readable listings.
FAQs
How many programming languages does this code syntax highlighter support?
The Language menu lists 55 languages plus Plain text, from JavaScript, TypeScript, Python, Java, C/C++, Go and Rust to SQL, YAML, Dockerfile, Nginx, COBOL and Fortran. Highlighting is pattern-based, not a full parser, so unusual syntax can occasionally be coloured imperfectly. You choose the language yourself; the tool does not try to detect it from the code.
How do I turn highlighted code into an image?
Click Export PNG or Export SVG. PNG can be saved at 1x, 2x, 3x or 4x size; SVG is a vector image that stays sharp at any size. Both use the current theme, font size, line height, padding, corner radius, line numbers and highlighted lines. A very long snippet is scaled down to fit the browser canvas limit, and one too tall even at 1x should go to SVG or HTML.
How do I paste highlighted code into Word or Google Docs?
Click Copy Highlighted, then paste into the document. The tool puts both rich HTML with the colours and a plain-text version of your code on the clipboard, so editors that accept formatting keep the colours and others receive plain code. If the browser blocks clipboard access, a message says so, and Export HTML gives you the same colours as a file.
How do I add syntax-highlighted code to a blog or website?
Click Copy Embed and paste the result into a custom HTML or raw HTML block in your editor. It is one div with inline styles, so it needs no extra stylesheet or script. Platforms that strip inline styles will lose the colours; use Export PNG or Export SVG there, and add the code as text elsewhere on the page for readers and search engines.
How do I highlight specific lines of code?
Type line numbers into the Highlight Lines box, separated by commas, with a hyphen for ranges. For example 1,3-5,7 highlights line 1, lines 3 to 5 and line 7. The lines get the theme’s highlighted-line background in the preview and in every export. Numbers beyond the last line of your code are ignored.
Can I create my own syntax highlighting theme?
Yes. Click the palette button next to Theme to edit 12 colours: background, text, keywords, strings, comments, numbers, functions, operators, class names, line numbers, line number background and highlighted line. Type a name up to 40 characters and click Save theme. It then appears under Your themes, and Delete theme removes it again.
Is my code uploaded anywhere when I highlight it?
No. It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). Highlighting, copying and every export happen on your device. The one thing the tool stores is a custom theme, and only when you click Save theme: it goes into your browser’s localStorage on this device and is never sent anywhere.
What is the difference between syntax highlighting and code formatting?
Syntax highlighting only colours the code you already have; it never changes a character of it. Formatting, also called beautifying, rewrites whitespace and line breaks so the code follows a consistent layout. Format first with a beautifier if the indentation is messy, then paste the tidy result here to colour it and export it.