Rouge: code snippet highlighting not working

Help
1

I’m using Jekyll 3.3.0 with a Github Pages blog. According to the documentation, Jekyll supports code snippet highlighting natively as long as the _config.yml points to Kramdown for markdown processing and Rouge (I’m running 2.0.7) for syntax highlighting.

I can’t get it to work using the approved method or various methods I’ve found on the internet. The only thing it recognises is that there is code there. For example, using either backticks or {% highlight html %} will remove this code and show my actual code, as expected. So it’s recognising that it’s a code snippet. But the highlighting doesn’t work at all.

Here’s my _config.yml:

baseurl: /blog
exclude: ['README.md']
permalink: pretty

# Conversion
markdown: kramdown
highlighter: rouge
kramdown:
  input: GFM
  hard_wrap: false
  syntax_highlighter: rouge

And here’s an example of a test I’ve tried in a .md:

``` applescript
tell application "Safari" to quit
```

Applescript is supported by Rouge, so that shouldn’t be the issue. Nevertheless, I have tested it with html:

``` html
<a href="https://github.io>Here's a link to Github</a>
```

Any ideas? It’s driving me insane!

Thanks

2

Edit
While the solution below worked locally, uploading to Github Pages broke it all. So it’s still not fixed.

Original reply
OK, I’ve found the solution.

Unlike the initial Jekyll link I provided, there is another Jekyll guide which says you need to have a stylesheet at _css/syntax.css

This blog shows you how and where to put everything, along with a stylesheet you can use.

For reference:

  1. Add syntax highlighter CSS file as css/syntax.css to your existing or newly generated Jekyll site
  2. Load CSS inside of a corresponding layout file (e.g. _layouts/default.html):

<link href="/css/syntax.css" rel="stylesheet">

3

if it is still broken you are probably just not using the correct url for the syntax.css file. You might just need to add the baseurl setting in front of it.

You could also just add that css into your main css file.

4

Genius. This was it. The link in _layouts/default.html didn’t include {{ site.baseurl }} before the address.

Thanks!