Using Rouge with Redcarpet

0

Gemfile
gem 'redcarpet'
gem 'rouge'
application_helper.rb
def markdown(text)
  options = {
    filter_html: true,
    hard_wrap:   true
  }
  extensions = {
    autolink:           true,
    tables:             true,
    superscript:        true,
    fenced_code_blocks: true
  }
  # renderer = Redcarpet::Render::HTML.new(options)
  renderer = Rouge::Renderer.new(options)
  markdown = Redcarpet::Markdown.new(renderer, extensions)
  markdown.render(text).html_safe
end

def stripdown(text)
  require 'redcarpet/render_strip'
  Redcarpet::Markdown.new(Redcarpet::Render::StripDown).render(text)
end

Create a folder under helpers called rouge, i.e. app/helpers/rouge

app/helpers/rouge/renderer.rb
require 'redcarpet'
require 'rouge'
# require 'rouge/plugins/redcarpet'
require_dependency 'rouge/plugins/redcarpet'

class Rouge::Renderer < Redcarpet::Render::HTML
  include Rouge::Plugins::Redcarpet
end

Usage:

  • Markdown with Redcarpet and Rouge <%= markdown @topic.content %>
  • "stripdown" your Markdown code <%= stripdown @topic.content %>

Style it up:

apps/assets/stylesheets/rouge.scss.erb
<%= Rouge::Themes::Base16.mode(:dark).render %>

div.highlight {
  border-radius: 5px;
  padding: 10px;
  padding-bottom: 0px;
  margin-bottom: 12px;
}
pre.highlight {
  padding-bottom: 10px;
}

  • 0 posts
  • 0 subtopics
  • 10 months ago by vince