Add syntax highlighting to gh-pages

Question

Is there an easy way to add syntax highlighting to my various plugin's gh-pages using github's Pygments?

I know that every page runs through the Jekyll engine and provides syntax highlighting (ref). But I don't want to install a blog. I just want syntax highlighting applied to the code blocks in my gh-pages.

I guess I could always just include a different plugin with my gh-pages...

Answer 1

Pages already does pygments, there's nothing to install. Just use it!

---
layout: default
title: Something with codes
---

Happy fun highlighting. 
[More details](https://github.com/mojombo/jekyll/wiki/liquid-extensions)

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

Answer 2

"GitHub Pages now only supports Rouge, a pure-Ruby syntax highlighter" so you only need to change 'kramdown' syntax highligher to use 'rouge' in your _config.yml file.

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

Answer 3

Found this thread as the first hit while trying to figure out syntax highlighting, and I found an even easier way to do it that I thought I'd share. Just put the name of the language you want highlighted after the fenced code blocks (reference). No need to generate any css or use yaml.

This is regular text

```ruby
# This is highlighted code
def foo
  puts 'foo'
end
```
```python
# Here is some in python
def foo():
  print 'foo'
```

Answer 4

As pointed out by @David Douglas, "GitHub Pages now only supports Rouge, a pure-Ruby syntax highlighter"

You have to put this in you _config.yml. This is from the _config.yml of Barry Clark's Jekyll Now

# Jekyll 3 now only supports Kramdown for Markdown
kramdown:
    # Use GitHub flavored markdown, including triple backtick fenced code blocks
    input: GFM
    # Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting
    syntax_highlighter: rouge
    syntax_highlighter_opts:
        # Use existing pygments syntax highlighting css
        css_class: 'highlight'

---

Then for the code highlighting part...

The list of langauge aliases for Rouge are listed here: https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers

It uses all-lowercase latters.

For example, for JavaScript:

``` javascript
function test() {
    console.log("test");
}
```

Answer 5

The default syntax highlighter is rouge (equivalent to highlighter: rouge in your _config.yml file). With rouge, if you write a code block like this in markdown:

~~~js
let z = 26;
~~~

You can expect to get an HTML block like this:

<div class="language-js highlighter-rouge">
 <div class="highlight">
  <pre class="highlight"><code>
   <span class="kd">let</span> <span class="nx">z</span> <span class="o">=</span> <span class="mi">26</span><span class="p">;</span>
  </code></pre>
 </div>
</div>

Then all you need is a CSS file (if you're using a GitHub Pages Theme, you will get the CSS automatically). I'm not sure where the CSS is officially supposed to come from, but

• here is a CSS file for a light background
• here is a CSS file for code in a dark rounded rect (the rest of the site may use a light or dark background).

Feel free to customize the css to your liking.