Part 1: Basic markdown with gem redcarpet

I HAVE READ 10+ BLOGS ON THIS TOPIC. HERE IS THE MOST IDEAL ANSWER BASED ON ALL OF THEM.

Using markdown? With gem redcarpet?

Add gem rouge to add code highlight your markdown.

HOWTO

bundle add redcarpet
bundle add rouge

application_helper.rb

  require 'redcarpet'
  require 'rouge'
  require 'rouge/plugins/redcarpet'

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

  def markdown(text)
    return '' if text.nil?

    options = {
      filter_html: true,
      hard_wrap: true,
      link_attributes: { rel: 'nofollow', target: '_blank' },
      prettify: true
    }

    extensions = {
      autolink: true,
      tables: true,
      fenced_code_blocks: true,
      lax_spacing: true,
      no_intra_emphasis: true,
      strikethrough: true,
      superscript: true,
      disable_indented_code_blocks: true,
    }

    # Redcarpet::Markdown.new(HTML.new(options), extensions).render(text).html_safe
    # these 3 lines do same as above 1 line
    renderer = HTML.new(options)
    markdown = Redcarpet::Markdown.new(renderer, extensions)
    markdown.render(text).html_safe
  end

Create rouge.css.erb and use one of 10+ available themes.

Here are my famorite ones:

# app/assets/stylesheets/rouge.css.erb
<%= Rouge::Themes::Base16.mode(:light).render(scope: '.highlight') %>
<%#= Rouge::Themes::ThankfulEyes.render %>
<%#= Rouge::Themes::Base16.mode(:dark).render %>
  • import the Rouge file into your assets
  • add some custom styling if you like
# app/assets/stylesheets/application.css
@import "rouge";

# style ```code block```
pre.highlight {
  padding: 10px;
}
# style `code`
code.prettyprint {
  color: red;
  background-color: #F2F2F2;
}

Bonus: download and edit a default Rouge theme

# console
rougify style github > app/assets/stylesheets/github.css

app/assets/stylesheets/application.scss

@import "github";