1

The objective

I am trying to render markdown documentation with snippets of code in it, and I'd like to highlight the syntax like on Github or BitBucket.

My Environment

  • Rails 4.0.4
  • Ruby 2.1.1

In my gemfile

gem 'haml-rails'
gem 'redcarpet' # markdown
gem 'rdiscount'
gem 'pygments.rb', '~> 0.5.4'

Initializer

I have tried this, but my snippets of code don't get highlighted:

module Haml::Filters

  remove_filter("Markdown") #remove the existing Markdown filter

  module Markdown

    include Haml::Filters::Base

    class HTMLwithPygments < Redcarpet::Render::HTML
      def block_code(code, language)
        Pygments.highlight(code, lexer: language)
      end
    end


    def render(text)
      #Redcarpet::Markdown.new(Redcarpet::Render::HTML.new(prettify: true), fenced_code_blocks: true).render(text)
      Redcarpet::Markdown.new(HTMLwithPygments, fenced_code_blocks: true).render(text)
    end

  end
end

tested with this simple YAML

 hello:
    world: "hey"

the code generated looks right (?)

<div class="highlight">
   <pre>  
    <span class="l-Scalar-Plain">hello</span><span class="p-Indicator">:</span>
    <span class="l-Scalar-Plain">world</span><span class="p-Indicator">:</span> 
    <span class="s">"hey"</span>
    </pre>
</div>

but it's plain grey, not highlighted

Do I need to install any CSS files for these classes to render properly??

Any suggestion?

zabumba
  • 12,172
  • 16
  • 72
  • 129
  • see if this [blog post](http://asciicasts.com/episodes/272-markdown-with-redcarpet) helps you. – Wally Ali May 25 '14 at 06:12
  • I actually did my home work and tried most of the tutorial resource out there, but considering that I am using Rails .4.0.4, there might be a little hitch – zabumba May 25 '14 at 11:08

1 Answers1

1

How I fixed it:

bash
$ pygmentize -S default -f html > style.css

and added this file to my css folder.

Jamal
  • 763
  • 7
  • 22
  • 32
zabumba
  • 12,172
  • 16
  • 72
  • 129