Jekyll Syntax Highlighting Not Working - Classes Are Not Being Added

Question

I cannot get syntax highlighting to work on my Jekyll-powered blog.

The development files can be found here: https://github.com/StevenXL/stevenxl.github.io.

As you can see, in my _config.yml file, I have the following:

markdown: kramdown

kramdown:
  syntax_highlighter: rouge

In my css/custom.css file, I am importing the CSS file to highlight the syntax with an @import command.

The actual CSS file for highlighting lives in css/monokai.css.

I am not sure what I am doing wrong. This seems to work fine on my local preview when I run jekyll serve but not when I push the development files to GitHub.It doesn't seem to be adding the correct classes when built by GitHub.

Answer 1

I had the same issue using the monokai highlighting css from the jekyll-uno theme.

To solve the problem I had to update the CSS, using rouge itself is quite straightforward (taken from the docs):

rougify style monokai > css/monokai.css

There are other themes available, too.

Answer 2

You must use the Jekyll highlight tag

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

Answer 3

For me this seemed to be a casing issue for my language hints.

Did not work:

``` SQL

Worked:

``` sql