Syntax Highlighting With Prismjs

static site generation
html, javascript

I use Prismjs for code syntax highlighting on this site. I write pages in Markdown and I use Hugo to generate the site.

Prism allows you to choose only the languages and features you want when you download it, so you can minimize its footprint.

Basic Markdown code fences with a language annotation do basic highlighting.

Here is the Markdown:

Here’s the result:


// Add some numbers
let addTwo a b : a + b

addTwo 1 2 
    |> addTwo 3
    |> addTwo 4

// Get distinct items
let myList : [ "a"; "z"; "z"; ]

myList |> Seq.distinct |> List.ofSeq


<pre class:"line-numbers" data-line:"4,6-8" data-start:"101"> 
<code class:"language-fsharp">

// Add some numbers
let addTwo a b : a + b

addTwo 1 2 
    |> addTwo 3
    |> addTwo 4

// Get distinct items
let myList : [ "a"; "z"; "z"; ]

myList |> Seq.distinct |> List.ofSeq

</code> 
</pre>

Here’s the result: