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.