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'

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

 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)


Now, include the helper in your Application Controller

Application Controller

class ApplicationController < ActionController::Base
 include MarkdownHelper

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


  # 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.


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

Now you can create your first post using Markdown


# 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

      def new


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


      # 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.


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

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


@import 'rouge';

Now, Make it look pretty!


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

       # Code goes here!


Thanks for reading!