Enabling custom Source Code Highlighting

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):

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:

## 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>

XML

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

## 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>