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";