How to Highlight Syntax Code Snippets in Jekyll site

Jekyll is a website generator that creates static pages. There are many benefits to using Jekyll compared to a dynamic website, such as: speed, easy to build, no coding, … Besides that, it has powerful support for syntax highlight so that code snippets highlighted are more reader-friendly. Following this guide, you can Highlight code in Jekyll site

Highlight code in Jekyll

There are two ways to do it. Each of them will have different cons and pros so that you should consider both and choose which way you think is easy for you to highlight Jekyll.

1. Using Rouge to highlight Jekyll

Rouge is a pure Ruby syntax highlighter. It can help Jekyll highlight more than 200 programming languages. Convert them to HTML tags and embed them into your static websites. As a result, Rouge is Jekyll’s default syntax highlighter.

Step 1: Installing Rouge syntax highlighter

In some cases, Rouge is not installed by default. You can install this Jekyll syntax highlighter by running this command in your terminal.

gem install kramdown rouge

After this installation, you need to add or modify your _config.yml file.

markdown: kramdown
highlighter: rouge

kramdown:
  input: GFM

Step 2: Using Rouge to highlight Jekyll

Now, you can enable syntax highlighting for your code snippets by warping your ones in {% highlight language %} and {% endhighlight %} tags. Don’t forget to replace language with your code’s language. You can find it at Rouge supported languages.

{% highlight cpp %}
int add(int a, int b) {
  return a + b;
}

int main() {
  cout << add(5, 10);
}
{% endhighlight %}

int add(int a, int b) {
  return a + b;
}

int main() {
  cout << add(5, 10);
}

You can also use linenos next to language, so that your Jekyll’s code snippets will show line numbers when Rouge process it.

2. Using GitHub fenced code blocks

On GitHub, you can highlight syntax by using triple backticks ```language before and ``` after the code snippets block to create fenced code blocks. Similarly, we can use the following syntax to highlight code on the Jekyll site:

```python
def add(a, b):
  return a + b

def main():
  print(add(5, 10))
```

def add(a, b):
  return a + b

def main():
  print(add(5, 10))

In the above example, I used Python, but you can replace it with the language you want highlight, you can find it in the list that I mentioned in method 1.

Conclusion

On this post, I introduced ways to Highlight Syntax in Jekyll, I hope you can know how to use them to make your Jekyll code snippets more beautiful, reader-friendly. Please let me know if you have any questions. Hope to see you on next posts.