78 lines
1.4 KiB
Markdown
78 lines
1.4 KiB
Markdown
---
|
|
title: Syntax highlighting
|
|
tags: [formatting]
|
|
keywords: rouge, pygments, prettify, color coding,
|
|
last_updated: March 20, 2016
|
|
summary: "You can apply syntax highlighting to your code. This theme uses pygments and applies color coding based on the lexer you specify."
|
|
sidebar: mydoc_sidebar
|
|
permalink: /mydoc_syntax_highlighting/
|
|
category: Formatting
|
|
weight: 9
|
|
---
|
|
|
|
## About syntax highlighting
|
|
For syntax highlighting, use fenced code blocks optionally followed by the language syntax you want:
|
|
|
|
<pre>
|
|
```ruby
|
|
def foo
|
|
puts 'foo'
|
|
end
|
|
```
|
|
</pre>
|
|
|
|
This looks as follows:
|
|
|
|
```ruby
|
|
def foo
|
|
puts 'foo'
|
|
end
|
|
```
|
|
|
|
Fenced code blocks require a blank line before and after.
|
|
|
|
If you're using an HTML file, you can also use the `highlight` command with Liquid markup:
|
|
|
|
{% raw %}
|
|
<pre>
|
|
{% highlight ruby %}
|
|
def foo
|
|
puts 'foo'
|
|
end
|
|
{% endhighlight %}
|
|
</pre>
|
|
{% endraw %}
|
|
|
|
It renders the same:
|
|
|
|
{% highlight ruby %}
|
|
def foo
|
|
puts 'foo'
|
|
end
|
|
{% endhighlight %}
|
|
|
|
|
|
The theme has syntax highlighting specified in the configuration file as follows:
|
|
|
|
```
|
|
highlighter: rouge
|
|
```
|
|
|
|
The syntax highlighting is done via the css/syntax.css file.
|
|
|
|
## Available lexers
|
|
|
|
The keywords you must add to specify the highlighting (in the previous example, `ruby`) are called "lexers." You can search for "lexers." Here are some common ones I use:
|
|
|
|
* js
|
|
* html
|
|
* yaml
|
|
* css
|
|
* json
|
|
* php
|
|
* java
|
|
* cpp
|
|
* dotnet
|
|
* xml
|
|
* http
|