Canonical way to use syntax highlighting of code blocks?

1

I’ve looked at several blog posts/resources about adding syntax highlighting to code blocks in a manner compatible with Github Pages - a lot don’t seem to work, perhaps being out of date, and some appear to be contradictory. Is there a ‘canonical’ way, in 2020, of specifying custom syntax highlighting for code blocks in Jekyll? I’m using minima v2.5 if that helps.

I’ve tried doing something like rougify style <style here> >> assets/css/syntax.css, but this seems to badly mess up syntax highlighting, and I can’t seem to customize the highlighting or the code block background by editing the syntax.css file.

I’ve also tried the steps detailed here: https://frankindev.com/2017/03/18/syntax-highlight-with-rouge-in-jekyll/ (amongst others), but can’t seem to make it work with Github Pages. I would just like to check if the contents of that post are still relevant today, and if my inability to make it work is on me. Any links to relevant current resources/guides would be very appreciated.

I am very new to Jekyll, so might be missing something blindingly obvious - probably need a ‘for idiots’ guide if we’re being honest…

2

What might be tripping you up is if you use Jekyll’s {% highlight %} tag to do code blocks versus the triple backtick GitHub Flavored Markdown way.

I don’t know if it’s still true (and may depend on what version of Jekyll and friends is installed) but at one point they both outputted different HTML. This will likely affect the CSS and or styling.

What I suggest is use the triple backtick (fenced code block) method, run Jekyll, inspect the HTML it produces and modify the CSS accordingly.

1 Like