Looking at syntax highlighters for this site
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 nottrue
), 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
.codehilite
s to.highlight
s or to delete all the.codehilite
s and nest them in the _syntax_highlighting.scss file.
- 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
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.