Jekyll 4 ships syntax highlighting through the gem Rouge. This post demonstrates calling on Rouge in Jekyll within your markdown workflow. This technique supports responsive design.

Background on Using Rouge with Jekyll

Jekyll documentation on Code snippet highlighting will get you started with syntax highlighting. Blog posts Syntax highlight with Rouge in Jekyll by Frank Lin and Syntax highlight with Rouge in Jekyll by Ronalds Vilcins will provide the reader with a basic understanding of syntax highlighting in Jekyll within your markdown workflow. These posts talk about setup, supported languages for highlighting, Pygments Syntax Highlighting themes, and some customization through configuration in _config.yml. From these ideas, the reader can consider modifying the CSS .highlight class to make a custom theme.

A point worth emphasizing is that Pygments themes use .syntax as the default CSS class. To use a Pygments theme, replace .syntax with .highlight in the Pygments CSS file or change the default .highlight CSS class name to .syntax in the Jekyll’s _config.yml file as follows

markdown: kramdown
highlighter: rouge
kramdown:
  input: GFM
  syntax_highlighter_opts:
    default_lang: html
    css_class   : 'syntax'

In any case, put the CSS file defining your .highlight class in your defined CSS stylesheets directory.

Calling Rogue

The markdown dialect kramdown supports code blocks, and Jekyll 4 with Rogue supports syntax highlighting the code blocks. Together, the syntax is

~~~ language
 // Your code goes here
~~~

where the long list of languages supported is listed HERE. For example, we can syntax highlight the Ruby code

~~~ ruby
def foo
  puts 'foo'
end
~~~

to obtain

def foo
  puts 'foo'
end

The syntax for the liquid language way Jekyll supports syntax highlighting is

{% highlight language %}
  // Your code goes here
{% endhighlight %}

For example, we again syntax highlight the Ruby code the liquid way

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

to obtain

def foo
  puts 'foo'
end

Notice there is little difference between the results of the two techniques. However, there are some interactions with previously defined classes in the liquid approach. Here the side effect is caused by my html figure class. The interactions are more pronounced when liquid is applied to display line numbers. The code

{% highlight ruby linenos %}
def foo
  puts 'foo'
end
{% endhighlight %}

displays as

1
2
3
def foo
  puts 'foo'
end

Here the side effect is caused by my table class. Whenever the code involves liquid tags, wrap the liquid tags in {% raw %} … {% endraw %} to syntax highlight the liquid language.

Finally, to do inline syntax highlighting, use the syntax

`inline`{:.language-yaml .highlight}

Share your comment