Code Highlighting
By Amr
Configure syntax highlighting for code blocks in Jekyll using Rouge and Kramdown.
Estimated reading time: 2 minutes
Table of Contents
Code Highlighting
Configure syntax highlighting for code blocks in your Jekyll site.
Default Configuration
The Zer0-Mistakes theme uses Kramdown with Rouge for syntax highlighting:
# _config.yml
markdown: kramdown
highlighter: rouge
kramdown:
input: GFM
syntax_highlighter: rouge
Usage
Basic Code Blocks
Specify the language after the opening fence:
```python
def hello_world():
print("Hello, World!")
```
Supported Languages
Rouge supports many languages including:
- Ruby, Python, JavaScript, TypeScript
- HTML, CSS, SCSS, YAML, JSON
- Bash, Shell, PowerShell
- Java, C, C++, Go, Rust
- SQL, GraphQL, Markdown
See the complete list of supported languages.
Alternative: highlight.js
For more customization, you can use highlight.js:
Installation
Add to your layout’s <head>:
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css"
/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>
hljs.highlightAll();
</script>
Line Numbers
Add line numbers with the highlightjs-line-numbers.js plugin:
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>
hljs.initLineNumbersOnLoad();
</script>
Custom Styles
Add CSS for line numbers:
table.hljs-ln {
width: auto;
border-width: 0px;
}
table.hljs-ln td {
border-width: 0px;
}
.hljs-ln-numbers {
text-align: center;
color: #ccc;
border-right: 1px solid #ccc !important;
padding-right: 5px !important;
}
.hljs-ln-code {
padding-left: 10px !important;
}
Themes
Rouge Themes
Rouge includes several built-in themes. Generate CSS with:
rougify style monokai > syntax.css
Available themes: base16, colorful, github, monokai, thankful_eyes, and more.
highlight.js Themes
highlight.js supports 89+ styles. Browse themes at the demo page.
Popular themes:
atom-one-lightatom-one-darkgithubmonokaivs2015
Best Practices
- Always specify language — enables proper highlighting
- Use fenced code blocks — more readable than
{% highlight %}tags - Keep code readable — break long lines when possible
- Match your theme — choose highlighting that complements your site design