Jekyll Code Syntax Highlighting

Pygments CSS Theme Builder

In an attempt to figure out how to style code syntax in markdown blocks, for my résumé, I found out Jekyll automatically comes bundled with a pure ruby gem called Rouge which was adapted from the original Python syntax highlighter Pygments.

Let’s jump right into it.

First off go to the Pygments CSS Theme Builder. This website allows you to customize your syntax down to multi-line comments, single-line comments, keywords, variables, operators, and virtually any part of your code.
Click ‘Save’ at the top to download the CSS version of your customized syntax highlighter.
Ensure you have the Rouge gem installed:
```
 gem install rouge
```
In config.yml add highlighter: rouge
Add your customized CSS file to your css folder.
This was the tricky part, I couldn’t figure out how to use my customized CSS in markdown. However, it’s quite easy using HTML. First add the stylesheet to your HTML head.
```
 <head>
 ...
 <link href="/css/syntax.css" rel="stylesheet">
 ...
 </head>
```

Next add the liquid template to highlight your code:

 { % highlight js % } // you need to set proper language args here
 console.log('I am now highlighted based on your CSS'); // your code here
 { % endhighlight % }

And you’ll get:

console.log('I am now highlighted based on your CSS'); // your code here

Resources