I recently added Markdown to my website using the Redcarpet and Rouge Gem. I initially tried out the CodeRay Gem, but I ended up liking Rouge more.

For a long time, I was using Code-prettify by Google. This has worked pretty well, but I plan to add some new features where people can leave comments using markdown.

With this in mind, this is how I added Markdown to this website.

Install the Redcarpet and Rouge Gem

Let's add some Gems
gem 'redcarpet', '~> 3.4'
gem 'rouge', '~> 3.3'
bundle

Next, lets create a Markdown helper

Note: I have elected not to parse my entire blog with Markdown, so you can see that I have excluded filer_html: true. If you want your entire model parsed in Markdown, just uncomment that line.

Markdown Helper
touch app/helpers/markdown_helper.rb

module MarkdownHelper
 require 'redcarpet'
 require 'rouge'
 require 'rouge/plugins/redcarpet'

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

 def markdown(text)
   render_options = {
     # filer_html: true, 
     hard_wrap: true,
     link_attributes: { rel: 'nofollow' },
     prettify: true
   }
   renderer = HTML.new(render_options)
   extras = {
     autolink: true,
     no_intra_emphasis: true,
     disable_indented_code_blocks: true,
     fenced_code_blocks: true,
     strikethrough: true,
     superscript: true,
     lax_spacing: true
   }

 markdown = Redcarpet::Markdown.new(renderer, extras)
   raw markdown.render(text)
 end

end

Now, include the helper in your Application Controller

Application Controller

class ApplicationController < ActionController::Base
 include MarkdownHelper
end

We're all set, we just need to add it to our view

posts/show.html.erb

  # I use a post model for my blog, but you can use markdown in any model you want.

  <%= markdown(@post.body) %>

Here is my index view as well

In my index view, I only show a snippet of the post, plus a read more link.

posts/index.html.erb

<article>
 <div class="">
   <%= markdown(post.body.truncate(150) )  %>               
 </div>
 <div class="">
  <%= link_to "Read More", post_path(post), class: "read-more-link" %>
 </div>
</article>

Now you can create your first post using Markdown

posts/show.html.erb

# To display code, you just need to add three opening and three closing backticks. 
# The backtick key is right below your escape key.

# Example below.   

      ```  
      def index
      end

      def new
      end 

      ```          

# To set your language, just add it right after your first three backticks, like so: 

      ```ruby

      # Code goes here

      ```                       

Now we can add some styling

The Rouge Gem comes with a number of themes, which can be found here. You can also code your own.

app/assets/stylesheets/_rouge.scss.erb

// Include a Rouge theme
<%= Rouge::Themes::Molokai.render(scope: '.highlight') %>

// Overrides

.highlight .c1 {
   color: #9594af!important;
   font-style: italic;
}

// Custom Styles

.ch {
  height: 30px;
  background-color: #e1e5e7;
  max-width: 97%;
  border-radius: 8px 8px 0 0;
  &__comps {
   display: inline-block;
   padding-left: 10px;
   } 
 &__comps span {
   font-size: 1.7rem;
   margin: 7px 0 0 5px;
   font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
   }
 }

.btnc {
   width: 17px;
   height: 17px;
   border-radius: 50%;
   border: 1px solid #f5f5f5;
   padding: 0 0 0 2px;
   margin: 6px 2px 0 0;
   cursor: default;

   &--green {
     background-color: #6ba83d;

   &:hover {
     background-color: #6ba83d;
   }
 }
   &--yellow {
     background-color: #e4b66a;

   &:hover {
     background-color: #e4b66a;
   }
 }
   &--red {
     background-color: #c95643;

   &:hover {
     background-color: #c95643;
   }
 }
}

// Rouge highlight class

.highlight {
 border-radius: 3px;
 max-width: 98%;
 box-sizing: content-box;
 display: block;
 margin: 0 0 3rem;
}

code,
.code,
pre {
   overflow-x: scroll;
   word-break: normal;
   white-space: pre!important;
   word-wrap: normal;
   padding: 14px 23px 14px 13px !important;

   & code {
   line-height: 1.5;
   white-space: pre-wrap;
   margin-left: -12px;
   }
}

Include the new file

application.scss

@import 'rouge';

Now, Make it look pretty!

HTML

<div class="ch">
  <div class="ch__comps">
    <button class="btnc btnc--green"></button>
    <button class="btnc btnc--yellow"></button>
    <button class="btnc btnc--red"></button>
    <span>HTML</span>
  </div>
</div>
      ```html

       # Code goes here!

       ``` 

Thanks for reading!