Syntax highlighting markdown code blocks in Jekyll (without using liquid tags)

Question

It seems like syntax highlighting in Jekyll is limited to using liquid tags and pygments like so:

{% highlight bash %}
cd ~
{% endhighlight %}

But I've imported my existing blog from wordpress and it was written in markdown (using markdown code blocks) and I don't want to have to go through each post and fix the code blocks. Also, I want to keep my posts in pure markdown format in case I ever need to switch blogging platforms again.

I switched my Jekyll parser to redcarpet with the hope that I could use this markdown syntax:

```bash
cd ~
```

But it doesn't seem to work. It just wraps it in a normal code block. Any ideas?

Answer 1

Fenced blocks were introduced with Redcarpet 2. Jekyll now supports Redcarpet 2.

As an aside I am using Redcarpet with Rouge until Kramdown support is available.

In addition some people prefer Nanoc to Jekyll.

Answer 2

Alternate solution

Markdown allows HTML, so if you don't mind adding a bit of JS, you could do this:

## A section

Here is some Ruby code.

<pre>
  <code class="ruby">
    puts "hello"
  </code>
</pre>

Then you could use Highlight.js (documentation here) to add highlighting based on that class.

It's not an ideal solution, but it should work with any Markdown parser.

Answer 3

I ended up switching to kramdown to parse markdown which comes with coderay for syntax highlighting. This has the benefit of being a pure ruby solution which works on heroku.

Answer 4

Step 1. Install Redcarpet.

gem install redcarpet

Step 2. Update the build settings in your _config.yaml like this.

# Build settings
#markdown: kramdown
markdown: redcarpet

Answer 5

In latest jekyll support code blocks, but if you use older version, you need to hack.

How about below? Try to add below's file as your _plugin/triple-backtick.rb

module Jekyll
  class MarkdownConverter
    alias :old_convert :convert
    def convert(content)
      content.gsub!(/(?:^|\n)```(\w*)\n(.*\n)```\n/m) do |text|
        cls = $1.empty? ? "prettyprint" : "prettyprint lang-#{$1}"
        "<pre class=\"#{cls}\"><code>#{$2}</code></pre>"
      end
      old_convert(content)
    end
  end
end

Answer 6

Redcarpet is integrated integrated into Jekyll by default and code highlighting will function as expected.

For older Jekyll blogs:

1. Install redcarpet gem:

   gem install redcarpet

2. Update _config.yaml

   markdown: redcarpet
   

For reference and further info see:

Closed Github Issue

Updated Jekyll Codebase

Answer 7

I've described 2 alternative solutions to adding properly formatted code snippets to your Jekyll driven site. http://demisx.github.io/jekyll/2014/01/13/improve-code-highlighting-in-jekyll.html. They do not rely on 3-rd party plugins and compatible with free GitHub Pages hosting.

Answer 8

So I ran into this problem as well and after banging my head around a lot of places finally realised with official redcarpet2 support in Jekyll this is pretty simple. Write this in your _config.yml

# Conversion
markdown: redcarpet
highlighter: pygments
redcarpet:
  extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "strikethrough", "superscript"]

Make sure that you have pygments css file and it is included. THIS STEP IS IMPORTANT.

You can read my blog post http://blog.championswimmer.in/2015/10/jekyllsyntax-highlighting-in-github-favoured-markdown-codeblocks/ for details.

Answer 9

You can also use the triple-tilde syntax:

~~~ruby
class Base
  def two
    1 + 1
  end
end
~~~

which is supported by Kramdown (Jekyll).