Search code examples
jekyllsyntax-highlightinggithub-pages

Jekyll, Github Pages: syntax highlighting not working

A similar question has been asked before but the solutions don't work for me.

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
  extensions: fenced_code_blocks

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>
```

I've also tried: {% highlight applescript %} tell application "Safari" to quit {% endhighlight %}

Github shows the highlighting when I view it through the github.com/user/repo but it breaks when viewed over user.github.io/repo

Thanks

Solution

  • The link address in _layouts/default.html was incomplete: it didn't include {{ site.baseurl }}

    The full line should be: 

    <link href="{{ site.baseurl }}/css/syntax.css" rel="stylesheet">