Source code
Paste code, open a UTF-8 file, or load a language example.
Syntax Highlighter / Product scope
Prepare code that is easy to follow.
Paste or import source code, choose a language and theme, and preview your changes as you edit. Adjust line effects, then export HTML or a PNG image in your browser.
Everything you need to prepare a code example, from source input to downloadable output.
Languages and themes
Search languages, aliases and themes. Filter themes by light or dark appearance.
Line effects
Set ranges, colors and opacity for emphasis, focus, added lines and removed lines.
Preview and configuration
See changes immediately and inspect the JSON configuration that controls the output.
HTML output
Copy or download HTML with inline styles, a separate CSS file, or Tailwind CSS output.
Images and presentation
Save a PNG, set line numbers, fold sections, and turn URLs into links.
Try the full workflow in your browser.
Use the demo to explore line emphasis, focus, additions, deletions, folding and line numbers. The preview and downloads use the same settings.
Online code highlighter