FormatterHQ
JSON Tools XML Tools YAML Tools CSV & TSV Tools HTML Tools CSS Tools JavaScript Tools SQL Tools Code Formatters & Beautifiers Minifiers Validators Data Converters Data to Class Generators Escape & Unescape Encode & Decode Base64 Tools Hash & Cryptography String & Text Utilities Number Converters Color Converters Unit Converters IP & Network Tools Random Data Generators Diff & Compare Viewers & Editors Image Tools PDF Tools Markdown Tools SEO & Webmaster Tools Developer Utilities JSON Formatter PDF Tools XML Formatter Beautifiers Converters Blog

JSON Syntax Highlighter

Colorize JSON with a Light, Dark or Monokai theme, preview the result and copy it as HTML that you can paste into a blog post, wiki or documentation page.

Input JSON
Output JSON
Ready.

How to use the JSON Syntax Highlighter

  1. Paste your JSON or load it with Upload file or Load URL.
  2. Choose a Theme (Light, Dark or Monokai), set Indent and decide whether to show Line numbers.
  3. Click Highlight and check the result on the Preview tab.
  4. Tick Output embeddable HTML to get a <style> and <pre> snippet on the Code tab, then Copy it into your page.

JSON syntax highlighting you can take with you

JSON syntax highlighting colors keys, strings, numbers, booleans and null differently so readers can parse a document at a glance. Code editors do this automatically, but a blog platform, internal wiki or HTML email often does not. This tool produces the colored version as plain HTML and CSS, so the highlighting travels with the content and needs no JavaScript library on the page where you paste it.

Your JSON is parsed first and re-indented with the Indent you choose, so the published example is always valid and consistently laid out. Invalid input is reported with a line and column instead of being highlighted.

Themes and options

  • Light uses a white background with blue keys, dark red strings and green numbers.
  • Dark uses a charcoal background with light blue keys, orange strings and pale green numbers.
  • Monokai uses the classic dark olive background with cyan keys, yellow strings and purple numbers.
  • Line numbers (on by default) adds a numbered gutter. The numbers are styled so they are not selected when a reader copies the code from your page.
  • Output embeddable HTML switches the Code tab from the formatted JSON to an HTML snippet. Without it, the Code tab holds plain formatted JSON and the colored version lives on the Preview tab.

Example: the embeddable snippet

With the Monokai theme, line numbers off and the embed option on, the input {"id":7,"ok":true} produces:

<style>body{margin:0;background:#272822;color:#f8f8f2}pre{margin:0;padding:16px;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre}.k{color:#66d9ef}.s{color:#e6db74}.n{color:#ae81ff}.b{color:#fd971f}.u{color:#f92672}.p{color:#a6a6a6}.ln{display:inline-block;width:3em;margin-right:1em;text-align:right;color:#a6a6a6;opacity:.6;user-select:none}</style>
<pre class="json-hl" style="background:#272822;color:#f8f8f2"><span class="p">{</span>
  <span class="k">"id"</span><span class="p">:</span> <span class="n">7</span><span class="p">,</span>
  <span class="k">"ok"</span><span class="p">:</span> <span class="b">true</span>
<span class="p">}</span></pre>

Each token is wrapped in a span with a short class: k for keys, s strings, n numbers, b booleans, u null and p punctuation.

Before you paste it into a site

The style block is written for a standalone page, so review it before embedding it in a larger one:

  • Delete the body{…} rule, or it will change the margin and background of the whole page.
  • The pre{…} rule applies to every pre element on the page. Change the selector to pre.json-hl to limit it to the snippet.
  • Prefix the short class selectors with .json-hl (for example .json-hl .k) if your site already uses classes named k, s or n.
  • If you add several snippets to one page, include the style block once.

Platforms that strip <style> tags, such as some content management systems, will keep the background and text color because those are set inline on the pre element, but the token colors will be lost.

Preview and download

The Preview tab shows the highlighted JSON as a complete HTML page. With Preview active, Download saves that page as an .html file and Copy copies its full source, which is convenient for slides or for attaching a readable sample to an email.

Related tools

To highlight code in other languages, such as JavaScript, SQL or Python, use the general code highlighter. If you only need readable text without colors, the JSON pretty print tool is simpler. Highlighting runs in your browser, and your JSON is only sent to our server if you use Load URL or Save & Share.

Frequently asked questions

Does the highlighted HTML need JavaScript to display?
No. The output is static HTML with CSS colors, so it renders wherever HTML and CSS are allowed, with no script to load or run.
Why did my blog remove the colors?
Some editors and CMS platforms strip style tags or class attributes from pasted HTML. Check whether your platform has an HTML or code block that keeps them, or add the CSS rules to your site stylesheet instead.
Can I change the colors of a theme?
Yes, after copying. The colors are ordinary CSS values in the style block, one per token class, so you can edit them to match your brand before publishing.
Can I highlight invalid JSON or JSON with comments?
No. The input is parsed before it is highlighted, so errors are reported instead. Fix or repair the JSON first, or use the general code highlighter, which colors text without validating it.
Will readers copy the line numbers along with the code?
No. The line numbers are marked with user-select: none, so selecting and copying the code in a modern browser leaves them out.

Last updated October 3, 2026

Related tools

JSON to JSONL Converter Convert a JSON array to JSON Lines (JSONL / NDJSON), one record per line, for streaming, logging, BigQuery and ML datasets. JSON to One Line Convert multi-line JSON to a single line. Collapse formatted JSON for logs, CLI arguments, environment variables and CSV cells. JSON to PHP Array Converter Convert JSON to a PHP array literal with short [] or array() syntax, ready to paste into Laravel config files, seeders and tests. JSON to String Converter Convert JSON to a single escaped string you can paste into code, databases or other JSON documents. Choose double, single or no quotes. JSON Tree Viewer Display JSON as an expandable tree. Collapse and expand objects and arrays to understand deeply nested data structures. JSON Unflatten Rebuild nested JSON from flat dot-notation keys (a.b.c) or bracket paths (a[0].b), the reverse of JSON flatten. JSON Validator Validate JSON online and find syntax errors fast. Get the exact line and column of each problem and fix broken JSON in one click. JSON Viewer & Beautifier View JSON as a collapsible tree and beautify it at the same time. Explore nested objects and arrays without losing your place. JSON5 Formatter Format and beautify JSON5 with comments, unquoted keys and trailing commas, or convert JSON5 to strict JSON. JSON5 Validator Validate JSON5 syntax online. Check config files with comments and trailing commas and get line and column for each error. JSONL to JSON Converter Convert JSON Lines (JSONL / NDJSON) into a formatted JSON array. Invalid lines are reported with their line number. JSONPath Tester Test JSONPath expressions online against your JSON. Supports filters, wildcards, recursive descent and slices, returning values or paths.