In this post, I will quickly share an “Aha!” moment with you.

I used to wrap my code in {% highlight %} and {% endhighlight %} tags like it’s explained in the documentation. But with more than a single code block on a page, this gets annoying quickly.

Turns out there is an easier way built into Jekyll.

The easy way

It wasn’t until I read this post by Frank Lin mentioning a different way to achieve the same result. It goes like this:

<pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token comment">&lt;!-- your HTML here.. --></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

Wait for it..

Mind blown

Why isn’t this mentioned in the Jekyll documentation?!

From the article I learned this syntax is called fenced_code_blocks. Turns out this is documented, but swept under the Redcarpet Markdown Options.

Enjoy highlighting your code the easy way!

Sources