How to highlight JSON in code block macro

Still need help?

The Atlassian Community is here for you.

Ask the community

Platform notice: Server and Data Center only. This article only applies to Atlassian products on the server and data center platforms.


As described in Code Block Macro, you can add new language highlighting to Code Block macro.

Language files must be correctly formatted JavaScript files and adhere to the Custom Brush syntax


Save below code as JavaScript (*.js) file and add it to Confluence following instructions from Code Block Macro page

  1. Go to  > General Configuration > Configure Code Macro.
  2. Choose Add a new language.
  3. Locate your language file and enter a Name for the new language (this will appear when selecting the language).
  4. Choose Add.
JSON Code Block highlight
	// CommonJS
	SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);

	function Brush()
		var keywords =	'false true null';

		this.regexList = [
			{ regex: /"([^\\"\n]|\\.)*"(?=:)/g,		                    css: 'string' },	 // strings
			{ regex: /-?(0|[1-9]\d*)(\.\d+)?([eE][+-]?\d+)?/g,          css: 'number' },     // number
			{ regex: /"([^\\"\n]|\\.)*"/g,		                        css: 'value' },      // value
			{ regex: new RegExp(this.getKeywords(keywords), 'gm'),		css: 'keyword' }     // keyword

	Brush.prototype	= new SyntaxHighlighter.Highlighter();
	Brush.aliases	= ['json'];

	SyntaxHighlighter.brushes.Json = Brush;

	// CommonJS
	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;

Last modified on Feb 9, 2022

Was this helpful?

Provide feedback about this article
Powered by Confluence and Scroll Viewport.