Jekyll is a super easy way to create static websites with tons of features! One of those features is syntax highlighting for code snippets. In this post we’ll take a look at customizing your syntax highlights a bit.
Changing your syntax style with rouge
If you don’t like the syntax highlights provided by your theme or just want to change it up a bit, you can use the Rouge gem to create a new highlighting file. Rouge is the default highlighter provided by Jekyll which makes it even easier to use! If you don’t already, install the rouge gem with gem install rouge. To use the gem on the cli, the command is rougify. To list available styles type rougify help style. Next, we’ll create your new stylesheet in the assets/css/ folder with your chosen style. Alternatively, if you don’t like any of the available styles, create one thats closest to your taste and customize it from there.
rougify style monokai > assets/css/syntax.css
Tip: if it doesn’t already, make sure that your html links to your stylesheet in your html templates.
Inline Highlighting
Unfortunately, Jekyll doesn’t offer highlighting for inline code though and renders snippets like this without coloring. This CAN be achieved though with a simple hack. One caveat however is that you must use the liquid way of highlights inline as opposed to the simpler way of wrapping with back-ticks.
First create the plugin jekyll_inline_highlight.rb in the _plugins directory of your project. Next copy the code found here. Finally wrap the text you’d like to highlight with a liquid tag.
{% ihighlight lang %} code {% endihighlight %}
Note the ‘i’ before as opposed to the standard highlight tag.
To verify this is working here’s an example of highlighted python code printf("Hello."); in a sentence.
Run jekyll serve to verify that your plugin works and renders your content and you’re good to go! How easy was that?
