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?

Tana

I just noticed this open ticket: github.com/mojombo/jekyll/issues/427 – Tana

Official documentation: jekyllrb.com/docs/posts/#highlighting-code-snippets – Detonator

Possible duplicate of Syntax highlighting in jekyll using redcarpet – Josey

@iPython that question was created Dec 8 '14 at 20:14. This question was created Dec 27 '11 at 19:21, almost 3 years prior. – Tana

Answer 1

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.

Tana

Thanks. It seems that kramdown doesn't recognize ```r, even though it does recognize fenced blocks with tildes, ~~~. – Anthea

@mirthlab seems to be working very well for math and code, thanks – Jovitta

Answer 2

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.

Equator

I've been using Nanoc lately and like it a lot. – Langelo

Answer 3

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.

Langelo

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

Monkfish

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

Chanel

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

Polish

Answer 7

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.

Weymouth

link to blog post is broken – Grandsire

Using that, you will recieve an error e-mail from Github; "You are currently using the 'redcarpet' Markdown engine, which is no longer supported by GitHub Pages and may cease working at any time. To ensure your site continues to build, remove the 'markdown' setting in your site's '_config.yml' file and confirm your site renders as expected. For more information, see docs.github.com/github/working-with-github-pages/…." – Jumada

Answer 8

You can also use the triple-tilde syntax:

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

which is supported by Kramdown (Jekyll).

Howlan