Syntax Highlighting

Aoife’s Markdown engine supports the original specification of Markdown published by Jon Gruber. However, as a developer I frequently find myself wanting to display code samples in my posts. Other variants of Markdown have added this functionality in the form of code fences.

Code fences are simply blocks of code enclosed by triple back-ticks (```). You can optionally specify the language of the code in the fence by suffixing the initial triple back-ticks with the language name. Here’s an example of a block of Xojo code:

'''xojo
dim a as Integer = 5
dim b as Integer = 10

if a < b then
  MsgBox("Yep")
end if
'''

To actually add syntax highlighting to the page you’ll need to use a javascript library. I use and highly recommend Prism. Here’s how the above code is rendered with Prism:

dim a as Integer = 5
dim b as Integer = 10

if a < b then
  MsgBox("Yep")
end if

Whilst Aoife does not support code fences by default, they can be enabled by setting the supportCodeFences variable in the site’s config.json file to true. It is worth noting that this adds some build time overhead so only enable if you have or plan to use code fences in your content.

Modified: Dec 9, 2016 at 16:29:12

Aoife v0.9.0 documentation