Jekyll - Rouge does not work in my custom theme

Question

I am making my own theme in Jekyll, and I wanted to use syntax highlighting.

For this I did:

1) Install rouge and kramdown in my Gemfile

gem 'kramdown'
gem 'rouge'

2) Update my _config.yml

markdown: kramdown
highlighter: rouge

3) Write some code in my post

{% highlight javascript %}
$(".myClass").on("click", function(){...});
{% endhighlight %}

But I am still not getting any highlighting.

Why is that? Do I need to include an specific css file in the <head>?

score 1 · Answer 1 · answered Jul 19 '18 at 12:24

1

I think it's possible you forgot to install the gems locally. You shouldn't need to add the stylesheet but do check your browser console for any errors.

You should also be able to export a base stylesheet and extend it as needed:

rougify style base16.solarized.dark > css/syntax.css


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

answered Jul 19 '18 at 12:24

Keith Mifsud

1,599
1
16
26

You conflicting styles! – Keith Mifsud Jul 19 '18 at 12:59
Indeed, Bootstrap is conflicting with rouge (weird), but even after deleting it, I got no padding on the box. https://pasteboard.co/Hvbg0J5.png – Enrique Moreno Tent Jul 19 '18 at 13:05
Well, I can add the padding myself. The other problem was not conflict with bootstrap. The problem is that now to mark code, I have to use ``` instead of `{% highlight XXX %}` – Enrique Moreno Tent Jul 19 '18 at 13:23
You should be able to use both. I prefer ``` though because it is the same on GH comments, descriptions etc :) Is the issue solved? – Keith Mifsud Jul 20 '18 at 07:00

Jekyll - Rouge does not work in my custom theme

1 Answers1