I am Hack Sparrow
Captain of the Internets.

How to disable GitHub Pages’ default Rouge code highlighter

One of the best features of GitHub Pages (Jekyll) is its ability to converted code blocks within ``` to a pre-formatted HTML code section.

For example, this is how you mark a section of JavaScript code.

```js
var s = 'Hi';
```

Till recently (before Jekyll 3.x), the corresponding HTML code section used to be like the following:

<pre>
<code class="language-js">var s = 'Hi';</code>
</pre>

This allowed us to use mostly any client-side syntax highlighters we wanted.

Post Jekyll 3.x, the the corresponding HTML code section became this:

<div class="highlighter-rouge">
<pre class="highlight">
<code>
<span class="kd">var</span> <span class="nx">s</span> <span class="o">=</span> <span class="s1">'Hi'</span><span class="p">;</span>
</code>
</pre>
</div>

This forces us to use a syntax highlighter specifically written for Rouge, the gem which does the the HTML transformation at the backend. If you are very picky when it comes to design and appearance, you may never be able to find a replacement for your old syntax highlighter's color theme from the list of Rouge syntax highlighter stylesheets.

On top of that, we lose context of the language specified ("language-js") for the code block.

You can make GitHub Pages (Jekyll) revert back to the old behavior, by adding to the following to the _config.yml file at the root of the site directory.

markdown: kramdown

kramdown:
input: GFM
hard_wrap: false
syntax_highlighter_opts:
disable: true

With this, you would have disabled Rouge syntax highlighter on your site, and can use your own custom highlighter.

Make a Comment