75 lines
1.3 KiB
Markdown
75 lines
1.3 KiB
Markdown
---
|
|
title: Syntax highlighting
|
|
audience: writer, designer
|
|
tags: formatting
|
|
keywords:
|
|
last_updated:
|
|
summary:
|
|
---
|
|
{% include linkrefs.html %}
|
|
|
|
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:
|
|
|
|
<pre>
|
|
{% raw %}{% highlight ruby %}
|
|
def foo
|
|
puts 'foo'
|
|
end
|
|
{% endhighlight %}{% endraw %}
|
|
</pre>
|
|
|
|
It renders the same:
|
|
|
|
{% highlight ruby %}
|
|
def foo
|
|
puts 'foo'
|
|
end
|
|
{% endhighlight %}
|
|
|
|
|
|
The theme has syntax highlighting configured in the configuration file as follows:
|
|
|
|
```
|
|
highlighter: pygments
|
|
```
|
|
|
|
You can use another highlighter such as rouge.
|
|
|
|
The syntax highlighting is done via the css/syntax.css file.
|
|
|
|
## Available Pygments lexers
|
|
|
|
The keywords you must add to specify the highlighting are called "lexers." You can search for "pygments lexers" or go directly to [Available lexers](http://pygments.org/docs/lexers/) to see what values you can use. Here are some common ones I use:
|
|
|
|
* js
|
|
* html
|
|
* css
|
|
* json
|
|
* php
|
|
* java
|
|
* cpp
|
|
* dotnet
|
|
* xml
|
|
* http
|
|
|