Github flavored Markdown and pygments highlighting in Jekyll

Question

I've deployed my Jekyll blog on a VPS. I would now like to add Github-flavored Markdown to it, using Pygments highlighting, but I don't know which files do I have to edit and how.

So far, the only file I've configured is _config.yml which looks like this:

  1 safe:        false
  2 auto:        false
  3 server:      false
  4 server_port: 4000
  5 baseurl:    /
  6 url: http://localhost:4000
  7 
  8 source:      .
  9 destination: ./_site
 10 plugins:     ./_plugins
 11 
 12 future:      true
 13 lsi:         false
 14 pygments:    false
 15 markdown:    maruku
 16 permalink:   date
 17 
 18 maruku:
 19   use_tex:    false
 20   use_divs:   false
 21   png_engine: blahtex
 22   png_dir:    images/latex
 23   png_url:    /images/latex
 24 
 25 rdiscount:
 26   extensions: []
 27 
 28 kramdown:
 29   auto_ids: true,
 30   footnote_nr: 1
 31   entity_output: as_char
 32   toc_levels: 1..6 
 33   use_coderay: false
 34 
 35 coderay:
 36   coderay_wrap: div
 37   coderay_line_numbers: inline
 38   coderay_line_numbers_start: 1
 39   coderay_tab_width: 4
 40   coderay_bold_every: 10
 41   coderay_css: style

How do I properly configure Jekyll to use Github flavored Markdown and Pygments highlighting?

Embosser

Answer 1

Edit: Easier now

as of Jekyll >= 0.12.1 redcarpet2 is natively supported by Jekyll, so you can simply set your config to markdown: redcarpet and you are good to go with GFM / fenced code blocks without the rest of this mumbojumbo...

Original answer

You explicitly ask for Github-flavored markdown, so I presume you aren't looking for answers that create code blocks with the non-markdown liquid format:

{% highlight python %}
def yourfunction():
     print "Hello World!"
{% endhighlight %}

but would rather be able to write something with fenced code blocks:

```python
def yourfunction():
     print "Hello World!"
```

etc. For this, you will want to use the redcarpet markdown parser.

Github-flavored markdown uses a markdown parser called "Redcarpet" 1. Ironically, though Github flavored markdown uses redcarpet2, this markdown parser is not supported by Jekyll by default. Instead, you can add this as a plugin by installing that ruby gem

gem install redcarpet

and then adding the redcarpet2 Jekyll plugin. (Installing a plugin in Jekyll amounts to placing the .rb ruby script given in that repository into your _plugins directory. Can be in a subdirectory of _plugins too).

Then, as explained on the documentation there, edit your _config.yml to use redcarpet2:

markdown: redcarpet2
redcarpet:
  extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "strikethrough", "superscript"]

which adds the common extensions provided by github-flavored-markdown aka redcarpet2 (Well, almost. This won't do github specific markdown things like identify issues by number, or commits by hash, so they aren't technically the same).

Having the plugin means, for the moment, you will have to build your site locally and copy the _site to github if you are hosting your site there, as redcarpet2 isn't available on the Github version of the jekyll engine (see this open issue on Jekyll)

Note: You don't need all the markdown editors you've specified in your _config.yml by the way. For a basic example using redcarpet2, you might want to see this config and the associated jekyll directory that goes with it.

Cabman

If I understand correctly, this has been merged in to Jekyll master and is available in their latest release. Perhaps you should update your answer with an update at the top so people don't get confused? – Rosenda

Let me re-suggest that you put your edit at the top, your answer is long enough that somebody like me might miss the payoff at the bottom :) And thanks for the quick response. – Rosenda

This worked for me: #15917963 – Pushbike

This works with the latest version of jekyll # Conversion markdown: redcarpet highlighter: pygments redcarpet: extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "strikethrough", "superscript"] But you must have the pygments' style.css file included in your html headers for this to work. – Mazzard

Answer 2

The best parts of Jekyll are, as said here,

...It takes a template directory (representing the raw form of a website), runs it through Textile or Markdown and Liquid converters, and spits out a complete, static website...

That means, you get Markdown and pygments highlighting by default.

You can discard or use the default _config.yaml for this setup. With your existing config, you might want to set pygments to true: pygments: true.

Here's what you do for

• Markdown: just name your file as *.markdown, for example 2012-12-01-my-post.markdown and place it anywhere inside the root directory. Normally, you would place it in _posts.

  When jekyll parses this file, it'll pass it through markdown filter. As an added bonus, you get to save as *.textile and it parses using textile. And, ofcourse, you can keep it .html so no parsing takes place for markdown.

• pygments: Just do this with your code:

  {% highlight python %}
  def yourfunction():
       print "Hello World!"
  {% endhighlight %}
  

  You also get linenumbers by doing:

  {% highlight python linenos %}   
  {% endhighlight %}
  

Edit: And also, You'll need to generate the syntax stylesheet using the command

pygmentize -S default -f html > style.css

as mentioned here and by @joshuahornby10. Include style.css in your html, obviously. Then, your code will be syntax-highlighted with pygments.

Oh, and you needn't change any settings in _config.yaml for this to work. Just run your site using jekyll --server --auto and see if it's looking good. Side note, when editing the _config file you will need to stop the auto run and re run jekyll for any changes to take place.

Upcoming

Answer 3

In the config file change

 pygments:    false 

to

 pygments:    true

This will mean when you write code sections in the markdown file (great resource http://daringfireball.net/projects/markdown/) they will use the pygments styling. Make sure you have installed, this is a mistake i made. Also once its installed you will need to create a css file for the styling to take place (sounds obvious but i made this mistake)

 pygmentize -S default -f html > stylesheets/pygments.css

You can change default to anyone of the themes found here:

http://pygments.org/demo/35195/

With regards to markdown I have read that in order to get pygments to work you need to markdown to be maruku which you already have set up in the config file.

Hope this helps, I have found Jekyll is a brillant blogging platform but very under documented.

Broddie

Answer 4

Since cboettig posted his answer, GitHub has stopped supporting redcarpet. If you want GitHub Flavored Markdown you now specify it directly as markdown: GFM in your _config.yml.

Myrmeco