Skip to content

Instantly share code, notes, and snippets.

@cb109

cb109/json_example.png

Last active April 20, 2026 12:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cb109/e14962763d991b917c7149ddd4967ba5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cb109/e14962763d991b917c7149ddd4967ba5 to your computer and use it in GitHub Desktop.
Download ZIP
Poor Man's JSON Syntax Highlighting
Raw
poor_mans_json_syntax_highlighting.html
<pre class="json">{{ pretty_json_data }}</pre>
<style>
pre.json {
background: #f8f9fa;
color: #1e293b;
padding: 12px;
border: 1px solid #dee2e6;
border-radius: 8px;
overflow: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
line-height: 1.4;
}
pre.json .key { color: #0550ae; }
pre.json .string { color: #116329; }
pre.json .number { color: #cf222e; }
pre.json .boolean { color: #953800; }
pre.json .null { color: #8250df; }
</style>
<script>
function syntaxHighlight(json) {
return JSON.stringify(json, null, 2)
.replace(/(&)/g, "&amp;")
.replace(/(".*?")\s*:/g, '<span class="key">$1</span>:')
.replace(/: ("[^"]*")/g, ': <span class="string">$1</span>')
.replace(/: (\d+)/g, ': <span class="number">$1</span>')
.replace(/: (true|false)/g, ': <span class="boolean">$1</span>')
.replace(/: (null)/g, ': <span class="null">$1</span>');
}
var data = {{ json_data|safe }};
var pre = document.querySelector("pre.json");
if (!!data && !!pre) {
pre.innerHTML = syntaxHighlight(data);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment