Code highlighting

Inline code

Inline code is available with backticks. Write `inline code` and Papicu will it render as inline code.

Writing inline code explicitly with <code> tags in Markdown also works, but that requires you to do more work. I would stick to backticks `. They’re much faster to type.

Papicu will it render as `inline code`.

Writing inline code explicitly with <code>&lt;code></code> in Markdown also works, but having to type that is more work.

Code blocks highlighted by Rouge

Snippets of multiple lines of code are supported through Rouge’s {% highlight lang %}, where lang is one of the languages supported by Rouge.

Here’s an example with {% highlight js %}:

/* Example can be run directly in your JavaScript console */

/* Create a function that takes two arguments and returns the sum of those arguments */
var adder = new Function("a", "b", "return a + b");

/* Call the function */
adder(2, 6);
/* > 8 */

{% highlight js %}
/* Example can be run directly in your JavaScript console */

/* Create a function that takes two arguments and returns the sum of those arguments */
var adder = new Function("a", "b", "return a + b");

/* Call the function */
adder(2, 6);
/* > 8 */
{% endhighlight %}

Besides {% highlight lang %}, you can also render multi-line code using code fencing with triple backticks: ```lang. The look ‘n’ feel will be the same:

/* Create a function that takes two arguments and returns the sum of those arguments */
var adder = new Function("a", "b", "return a + b");

```js
/* Create a function that takes two arguments and returns the sum of those arguments */
var adder = new Function("a", "b", "return a + b");
```

If long lines are present, code blocks will automatically get horizontal scrolling.

linenos and how to fix it

There’s an additional argument, linenos, that gives us a code block with numbered lines: {% highlight js linenos %}.

We haven’t showed an example with linenos because it makes Jekyll generate nested <pre> elements, which is invalid HTML and messes with our minifier. We’d rather keep our HTML minifier happy and working properly, so we’d avoided linenos altogether.

There had been a pull request to Jekyll (#8412) creating a new tag, rougify, that would generate valid HTML and thus substitute highlight. But the PR hasn’t been merged and it is now closed.

For now, if you need numbered lines in your code blocks, use this workaround proposed by @DeXP.

So let’s suppose you have:

{% highlight lang linenos %} Some code {% endhighlight %}

Now you must change it to:

{% capture fixed_code %}
{% highlight lang linenos %} Some code {% endhighlight %}
{% endcapture %}

{% include fix-linenos.html %}
{{ fixed_code }}

Here’s an actual, working example with numbered lines thanks to this fix:

1
2

/* Create a function that takes two arguments and returns the sum of those arguments */
var adder = new Function("a", "b", "return a + b");

{% capture fixed_code %}
{% highlight js linenos %}
/* Create a function that takes two arguments and returns the sum of those arguments */
var adder = new Function("a", "b", "return a + b");
{% endhighlight %}
{% endcapture %}

{% include fix-linenos.html %}
{{ fixed_code }}

For another approach, check out Byte Dude’s implementation (a). It is based on his Jekyll plugin, highlight-linedivs.

December 2021