Syntax Highlighting in Jekyll Using Redcarpet

Syntax highlighting in jekyll using redcarpet

You need some CSS magic. Use this one or pick one from here.

Jekyll + redcarpet line numbers

Out of the box Jekyll code highlight :

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

And no need to highlight with javascript. Just add pygments css.

Redcarpet Syntax Highlighting

Ok i found -> Markdown and code syntax highlighting in Ruby on Rails (using RedCarpet and CodeRay) which pretty much worked (together with some custom css for Coderay).

Gemfile:

gem 'redcarpet', github: 'vmg/redcarpet'
gem 'coderay'

Application_helper.rb

class CodeRayify < Redcarpet::Render::HTML
  def block_code(code, language)
    CodeRay.scan(code, language).div
  end
end

def markdown(text)
  coderayified = CodeRayify.new(:filter_html => true, 
                                :hard_wrap => true)
  options = {
    :fenced_code_blocks => true,
    :no_intra_emphasis => true,
    :autolink => true,
    :strikethrough => true,
    :lax_html_blocks => true,
    :superscript => true
  }
  markdown_to_html = Redcarpet::Markdown.new(coderayified, options)
  markdown_to_html.render(text).html_safe
end

Redcarpet Syntax Highlighting

Ok i found -> Markdown and code syntax highlighting in Ruby on Rails (using RedCarpet and CodeRay) which pretty much worked (together with some custom css for Coderay).

Gemfile:

gem 'redcarpet', github: 'vmg/redcarpet'
gem 'coderay'

Application_helper.rb

class CodeRayify < Redcarpet::Render::HTML
  def block_code(code, language)
    CodeRay.scan(code, language).div
  end
end

def markdown(text)
  coderayified = CodeRayify.new(:filter_html => true, 
                                :hard_wrap => true)
  options = {
    :fenced_code_blocks => true,
    :no_intra_emphasis => true,
    :autolink => true,
    :strikethrough => true,
    :lax_html_blocks => true,
    :superscript => true
  }
  markdown_to_html = Redcarpet::Markdown.new(coderayified, options)
  markdown_to_html.render(text).html_safe
end

How to highlight Markdown code in Jekyll?

You can use Rouge or Coderay for this purpose.

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

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.

Convert Jekyll posts with Redcarpet

Looks like the way to use Redcarpet in Jekyll is by instantiating that class, and passing in site.config.

converter = Jekyll::Converters::Markdown::RedcarpetParser.new(site.config)

---

Related Topics