code blocks
Getting nice preformatted code on your site, perhaps with syntax highlighting and line numbers
The simplest thing (this always works)
If you put code inside a block starting and ending with ```, it will render as code:
You write:
``` # This is Python code print ("Hello, World") ```
You get:
# This is Python code
print ("Hello, World")
Syntax Highlighting
If you have things set up properly, you can get fancier, with syntax highlighting for specific languages, line numbers, and so forth.
You write:
```python # This is Python code print ("Hello, World") ```
A list of supported languages appears here: https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers
You get:
# This is Python code
print ("Hello, World")
A list of supported languages is here: https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers
Syntax Highlighting with Line Numbers
{% highlight python linenos %} def hello(): print ("Hello, World!") {% endhighlight %}
Gives:
1
2
def hello():
print ("Hello, World!")
Troubleshooting the colors and highlighting
If syntax highlighting with colors is not working, make sure that:
- The file
jekyll-github.css
should appear in the_includes
directory. You can find a copy here: jekyll-github.css - That file should be included by
site.css
like this:{% include jekyll-github.css %}
- You may also have to do this in
homework.css
,exam.css
, etc. if you have alternative css files for various layouts.
What if my code block contains stuff that is meaningful to liquid syntax?
If you have characters such as {{ this }}
that would
normally be meaningful to liquid syntax, and therefore are not showing
up properly inside code blocks, you can use these special markers to indicate
that liquid should NOT do any processing of that input:
{% raw %}
{% endraw %}
For example, to get:
In Handlebars, {{ this }} will be HTML-escaped, but
{{{ that }}} will not.
Use:
``` In Handlebars, {% raw %}{{ this }}{% endraw %} will be HTML-escaped, but {% raw %}{{{ that }}}{% endraw %} will not. ```
If you are trying to reproduce {% raw %}
and {% endraw %}
themselves
inside a code block, see the markdown source for this page.