Syntax Highlighting

In order to enable syntax highlighting, you must use a client-side JavaScript highlighter, such as highlight.js by adding it to page.headHtml of YAML configuration or Markdown frontmatter. Emanote already provides a snippet, so you may directly include the following in your index.yaml (assuming you are enabling it on all routes):

  headHtml: |
    <snippet var="js.highlightjs" />

Bear in mind that when using highlight.js you must manually add language support. The above snippet includes Haskell and Nix by default; otherwise, it is normally added as:

  headHtml: |
    <snippet var="js.highlightjs" />
    <with var="js">
    <script src="${value:highlightjs-ver}/languages/haskell.min.js"></script>

(The highlightjs-ver variable comes from the default index.yaml.)

Example (highlight.js)


def fib(n):
    a, b = 0, 1
    while a < n:
        print(a, end=' ')
        a, b = b, a+b


fib 0 = 0
fib 1 = 1
fib n = fib (n-1) + fib (n-2)


A predefined snippet also exists for another syntax highlighter called Prism. To use it add the following to page.headHtml of YAML configuration or Markdown frontmatter.

  headHtml: |
    <snippet var="js.prism" />

However, take note that Prism does not cooperate well with Emanote’s live preview mode.

Links to this page