Enabling custom Source Code Highlighting

This recipe explains how to add source code highlighting to a Scroll Viewport theme.

If you want to have the style delivered with Confluence, please refer to General third-party app implementation.

This is necessary because Scroll Viewport does not format the content of a code macro by default. Instead, theme developers can use a source code highlighter of their own choice. This recipe documents how to use the Prism and Prettify highlighters.

Code Highlighting with Prism

Prism is an open source modular source code highlighter written in JavaScript. It can be themed using CSS.

To use it in a Scroll Viewport theme, firstly create a macro override template that overrides the rendering of the code macro (by convention this should be located in the overrides directory in the template):

overrides/code.vm

CODE

<pre><code class="language-$params.language">$stringEscapeUtils.escapeHtml($body)</code></pre>

If you want to use different templates for one macro, please have a look at overriding the output of macros.

Go to the download section of Prism and select theme and the languages you want to format. Then download the files and put them in their appropriate folder within the Viewport theme.

Now, you can embed them in your page.vm as shown below:

XML

## load the link to the CSS theme (in the HTML header)
<head>
	<link href="${theme.baseUrl}/assets/css/prism.css" rel="stylesheet">
</head>

 
## load the JS file (usually at the end of the template)
<script src="${theme.baseUrl}/assets/js/prism.js"></script>

Code Highlighting with Prettify

Prettify is a source code highlighter written in JavaScript. It can be themed using CSS.

To use it in a Scroll Viewport theme, firstly create a macro override template that overrides the rendering of the code macro (by convention this should be located in the overrides directory in the template): overrides/code.vm

CODE

<pre class="prettyprint linenums">$stringEscapeUtils.escapeHtml($body)</pre>

Now, register the macro override when rendering the content (in blog.vm and all page templates, replace $page.content with the following):

CODE

$page.renderContent("layouts/layout12.vm", {
    "code" : "overrides/code.vm"
}))

Then, add the references to prettify.js and the CSS file:

CODE

## load the link to the CSS theme (in the HTML header)
<link href="${theme.baseUrl}/assets/css/prettify-tomorrow.css" rel="stylesheet">
 
[...]
 
## load the JS file (usually at the end of the template)
<script src="${theme.baseUrl}/assets/js/prettify.js"></script>

Finally, call prettify when the document loads:

CODE

<body onload="prettyPrint()">
[...]
</body>

Next steps

Please also read Advanced Content Rendering for more information about macro overrides.