These are my notes while investigating syntax highlighting methods for code on this site. I’m currently letting Jekyll natively sort it out, but I want to switch to Hugo, and I have some choices to make.

Syntax Highlighting for Hugo

  • Using Pygments in Hugo generation is available, but I don’t think it will work well on my Windows authoring environment, especially since I’m not planning on installing Python.
  • So I’m looking at the client-side alternatives, but I’m wondering if I can just run the Hugo output through nodejs to apply static styling before uploading the files to the static server.
  • Options
    • Highlight.js seems to be very popular, but I am leaning towards Prism
    • Prism reportedly enforces proper HTML code for syntax highligting, and apparently others don’t
    • Rainbow is hailed as lightweight, but with gzip and HTTP/2 I’m not necessarily too worried about performance. (Especially if I wind up preprocessing the highlighting with node before upload.)
    • Syntax Highlighter is long-lived but not up-to-current HTML standards as admitted in their repo Readme
    • Google Prettify exists, and for some unknown reason it hasn’t caught mindshare in my head while reading about this. Oh, maybe because it wasn’t included in the comparisons I read.
  • When using code fencing and specifying a language (and pygmentscodefences is not true), the output HTML has a class indicating the language which the client-side libraries can use for proper highlighting.

Syntax Highlighting for Jekyll

I got curious bout how Jekyll is doing it now that I know more about Hugo.

  • Older Jekyll used Pygments
  • But now Jekyll uses Rouge
  • Rouge is compatible with Pygments style sheets according to this
    • This appears to be a lie or an exaggeration. The short classes may be compatible, but the css files seem to need me to change all the .codehilites to .highlights or to delete all the .codehilites and nest them in the _syntax_highlighting.scss file.

Changing Jekyll Minima’s syntax highlighting colors

I really don’t like the highlighting colors in the default minima theme, but it looks like I can change them easily enough, and I’ll probably do that as migrating to Hugo will be a rather larger project than I originally thought. It doesn’t have to be, but I’ll want to customize a lot in the process.

  • Simply creating a replacement file doesn’t work for CSS
  • RTFMing tells me I have to create my own /assets/main.scss
  • At first I thought that didn’t work, but now I see the highlight colors changed but the background didn’t
  • Tried to fix it, but the text background is still that pinkish white even though the block background is dark
  • Failed again to fix it
  • I think I’ll give up on this for now as it’s frustrating me. I basically need to write my own layouts and style sheets instead of adapting others’.

Ideas about getting Hugo to do it all

I briefly looked into Hexo hoping it might be much faster than Jekyll while doing SASS and syntax highlighting in a more automated manner. Hexo seems that it may need hacking to do some of the things I want.

So, back to Go. I was thinking about some sort of automation, then I figured that since I know Go I can simply use Go libraries to extend the Hugo executable to do what I want:

  • Process SASS
  • Build the site
  • Syntax highlight pre-upload

For the first option there is gcss. There doesn’t seem to be a well-featured mature syntax highlighter written in Go, but while looking around I see that Pygments is pretty much considered top-class and feature complete. Ok, so instead of installing Python and Pygments on my workstations, perhaps I can set up a Pygments parser container and call it as a web service from my customized Hugo executable. That may not sound elegant, but in my home setup this seems the most elegant for me. And cross-platform. Yay.