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...

score 36 · Accepted Answer · answered Jul 08 '11 at 00:42

36

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 %}

answered Jul 08 '11 at 00:42

Tekkub

30,739
2
30
20

Hmm, ok I tried using it to highlight javascript and it didn't work. Do I need to wrap the code in something else like a `pre` tag? – Mottie Jul 09 '11 at 12:01
Do you have the yaml frontmatter? If not jekyll won't mess with the file. – Tekkub Jul 11 '11 at 05:08
Duh, thanks I see now... I didn't realize that was required as well :P – Mottie Jul 11 '11 at 20:29
12

where do you get the css that actually does the coloring? – kentor Mar 20 '12 at 04:25
4

@kentor you need to generate it by your own like this: `pygmentize -S monokai -f html > css/pygments/monokai.css` – baltazar Sep 29 '12 at 14:06
1

@kentor We have a nice collection of pygment themes in our [GitHub Dark Stylish repository](https://github.com/StylishThemes/GitHub-Dark/tree/master/themes) if you are interested; [here is a demo showing what they look like](http://stylishthemes.github.io/GitHub-Dark/). I also still have all the converted python files if you need them. – Mottie Sep 17 '14 at 00:20

score 9 · Answer 2 · answered Feb 04 '16 at 10:50

9

"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

answered Feb 04 '16 at 10:50

David Douglas

10,377
2
55
53

then place code between "\```java" and "\```", there is no double quote in fact, and the language code is from https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers – frank Jul 01 '18 at 15:13

score 3 · Answer 3 · answered Mar 11 '14 at 21:29

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'
```

answered Mar 11 '14 at 21:29

Brent

719
2
9
18

1

This question is about the github gh-pages where you do need yaml and/or _config.yml settings to include pygments. – Mottie Mar 11 '14 at 22:15
2

I was using github's auto-generator for gh-pages. Didn't realize the question was specific to the manual way. Looks like the generator does make a bunch of css for pygments under the hood. – Brent Mar 11 '14 at 22:57

score 3 · Answer 4 · answered Mar 13 '17 at 11:14

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");
}
```

score 3 · Answer 5 · answered Jun 08 '18 at 03:35

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.

Do note: I am using a default theme, but my highlighting didn't work. Adding a syntax.css myself resolved the issue. I also had to use the name of the highlighted language in lowercase. — Rob Bos, Jul 12 '19 at 19:28

Add syntax highlighting to gh-pages

5 Answers5

Linked