Table of Contents

Markdown in Ruby on Rails RSS feed in Ruby on Rails

Syntax Highlighting in Ruby on Rails

2013-04-10 18:36:10 UTC

Rouge

It's free and open source gem written by Jay Adkisson in pure Ruby with no other dependencies, so there is no need for any bridge like in Pygments. But generated HTML is fully compatible with pygments stylesheets. Supports many languages and is still in active development. See

It's quite fast. If you want to check comparison with other highlighters. See

Rouge with Redcarpet

For Redcarpet in Ruby on Rails see 16-markdown-in-ruby-on-rails

add in Gemfile:

gem 'rouge'

install:

$ bundle

create initializer in ./config/initializers/rouge.rb, for example:

# need to be required to use Rouge with Redcarpet
require 'rouge/plugins/redcarpet'

create a class inheriting from Redcarpet::Render::HTML and redefine it's block_code method to use Rouge in ./app/helper/application_helper.rb, for example:

class HTML < Redcarpet::Render::HTML
  # to use Rouge with Redcarpet
  include Rouge::Plugins::Redcarpet
  # overriding Redcarpet method
  # github.com/vmg/redcarpet/blob/master/lib/redcarpet/render_man.rb#L9
  def block_code(code, language)
    # highlight some code with a given language lexer 
    # and formatter: html or terminal256 
    # and block if you want to stream chunks
    # github.com/jayferd/rouge/blob/master/lib/rouge.rb#L17
    Rouge.highlight(code, language || 'text', 'html') 
    # watch out you need to provide 'text' as a default, 
    # because when you not provide language in Markdown 
    # you will get error: <RuntimeError: unknown lexer >
  end
end

use created class as a renderer in markdown method:

def markdown(text)
  render_options = {
    filter_html:     true,
    hard_wrap:       true, 
    link_attributes: { rel: 'nofollow' }
  }
  renderer = HTML.new(render_options)

  extensions = {
    autolink:           true,
    fenced_code_blocks: true,
    lax_spacing:        true,
    no_intra_emphasis:  true,
    strikethrough:      true,
    superscript:        true
  }
  Redcarpet::Markdown.new(renderer, extensions).render(text).html_safe
end

now you only need styling the output so you can use built-in styles from Rouge, put in file ./app/assets/stylesheets/rouge.css.erb:

<%= Rouge::Themes::ThankfulEyes.render(:scope => '.highlight') %>
or
<%= Rouge::Themes::Colorful.render(:scope => '.highlight') %>
or
<%= Rouge::Themes::Base16.render(:scope => '.highlight') %>

or just use Pygments stylesheets, placing in ./app/assets/stylesheets/. For available stylesheets See.

That's all. Have fun.

Written by: Marcin Szczepaniak Mail - Contact me

2013-04-10 22:59:56 UTC by Jayferd

Hey neat, thanks for the writeup! Just thought I'd mention that you don't actually need to write a block_code method, since it's included automatically from Rouge::Plugins::Redcarpet. (see https://github.com/jayferd/rouge/blob/master/lib/rouge/plugins/redcarpet.rb ).

It'll also use Rouge::Lexer.find_fancy, which allows you to pass in CGI-style options, like erb?parent=css.

Glad you found rouge useful :)

2013-12-07 20:59:55 UTC by Bala Paranj

I was able to get it working following this post. Thanks.

Comment