Code block syntax highlighting in Hakyll

Tags: hakyll

As explained in the Hakyll FAQ1 Pandoc2 is used to generate the syntax highlighting for code blocks. Numerous languages are supported by pandoc. The following command lists the supported languages for the version of Pandox you have installed :pandoc --list-highlight-languages. There is a link in the FAQ to the default Pandox syntax highlighting CSS file for styling purposes. Place this in the CSS folder of your Hakyll site and add <link rel="stylesheet" href="/css/syntax.css" /> to your default html template before rebuilding. Based on this blog post3 all of the Pygments CSS styles are available on Github4 should the default Pandoc CSS styles not meet your needs. There is also a tip in the blog post about recompiling Hakyll and Pandoc with explicit highlighting support if problems are encountered in getting it working. The result is that a blank code block such as this

import math

def areaOfCircle(r): 
    area = math.pi * r**2
    return area

print(areaOfCircle(3))

is rendering with pleasing syntax highlighting as follows:

import math

def areaOfCircle(r):
    area = math.pi * r**2
    return area

print(areaOfCircle(3))

  1. https://jaspervdj.be/hakyll/tutorials/faq.html#does-hakyll-support-syntax-highlighting↩︎

  2. https://pandoc.org/↩︎

  3. https://blog.debiania.in.ua/posts/2012-03-21-syntax-highlighting-in-hakyll.html↩︎

  4. https://github.com/Anomareh/pygments-styles-dump↩︎