Implementing markdown on blog posts

After having encountered an issue with the heroku deployment, I had a decision to make going into today. Should I try and debug the app on heroku, or should I work on the app locally, and build features on it. I decided to work on the app locally, and worry about the heroku deployment some other day.

I picked up a task from my to-do list. Today it would be - implement markdown on blog posts. Until now, I had been using simple-form for formatting the blog posts. However, with the implementation of markdown, I would able to write the blog posts on the app using markdown formatting.

The first step was to do a quick duckduckgo, and find a working solution for this. Following the tutorial, here's how I was able to accomplish my task.

First off, I needed the redcarpet gem. For this, I added the lastest redcrapet via
gem 'redcarpet', '~> 3.4'. After running bundle install, redcarpet was installed.

Now, I had to make changes to my application_helper.rb. One of the query, that I have when watching these tutorials is "How do I know what changes to make in what file to implement these gems?" I mean, when watching the tutorials, it all seems so magical and mysterious. For now, I tell myself to be patient and keep on working and learning Rails. Also keep working on my Ruby and the details will come to me slowly.

In the application_helper.rb

module ApplicationHelper
    # Setting up markdown
    def markdown(content)
        renderer = Redcarpet::Render::HTML.new(hard_wrap: true, filter_html: true)
        options= {autolink: true,no_intra_emphasis: true,fenced_code_block: true, 
        lax_html_block: true, strikethrough: true, superscript: true, underline: true, quote:true,footnotes:true}

        Redcarpet::Markdown.new(renderer, options).render(content).html_safe 
    end
end

Here I defined a method markdown that would take content as an argument. This content in my case would be the body of the blog post. Then following the tutorial I added a renderer variable that used Redcarpet. I did read through the Redcarpet Documentation and added the features I wanted to use.

With the Redcarpet setup - the markdown was ready. However, there were still some styling aspects that required my attention. For handling this, I used the Pygments gem. I added as pygments.scss file to my stylesheet folder, and here I used somebox/gh-like.css. I copy pasted the css that I wanted to implement on my pygments.scss.

/* 
   Some simple Github-like styles, with syntax highlighting CSS via Pygments.
*/
pre{
    background-color: #eee;
    padding: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: auto;
}
code{
    background-color: #eee;
    padding: 1px 3px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px; 
}


h1{
    color: #999;
    font-weight: bold;
}
h2{
    border-bottom: 1px dotted #aaa;
    margin-bottom: 1em;
    color: #333;
}
h3{
    color: #666;
}
.shadow{
    -webkit-box-shadow:0 5px 15px #000;
    -moz-box-shadow:0 5px 15px #000;
    box-shadow:0 5px 15px #000;     
}


.hll { background-color: #ffffcc }
.c { color: #888888 } /* Comment */
.err { color: #a61717; background-color: #e3d2d2 } /* Error */
.k { color: #008800; font-weight: bold } /* Keyword */
.cm { color: #888888 } /* Comment.Multiline */
.cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.c1 { color: #888888 } /* Comment.Single */
.cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.ge { font-style: italic } /* Generic.Emph */
.gr { color: #aa0000 } /* Generic.Error */
.gh { color: #303030 } /* Generic.Heading */
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.go { color: #888888 } /* Generic.Output */
.gp { color: #555555 } /* Generic.Prompt */
.gs { font-weight: bold } /* Generic.Strong */
.gu { color: #606060 } /* Generic.Subheading */
.gt { color: #aa0000 } /* Generic.Traceback */
.kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.kp { color: #008800 } /* Keyword.Pseudo */
.kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.kt { color: #888888; font-weight: bold } /* Keyword.Type */
.m { color: #0000DD; font-weight: bold } /* Literal.Number */
.s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.na { color: #336699 } /* Name.Attribute */
.nb { color: #003388 } /* Name.Builtin */
.nc { color: #bb0066; font-weight: bold } /* Name.Class */
.no { color: #003366; font-weight: bold } /* Name.Constant */
.nd { color: #555555 } /* Name.Decorator */
.ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.nf { color: #0066bb; font-weight: bold } /* Name.Function */
.nl { color: #336699; font-style: italic } /* Name.Label */
.nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.py { color: #336699; font-weight: bold } /* Name.Property */
.nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.nv { color: #336699 } /* Name.Variable */
.ow { color: #008800 } /* Operator.Word */
.w { color: #bbbbbb } /* Text.Whitespace */
.mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.bp { color: #003388 } /* Name.Builtin.Pseudo */
.vc { color: #336699 } /* Name.Variable.Class */
.vg { color: #dd7700 } /* Name.Variable.Global */
.vi { color: #3333bb } /* Name.Variable.Instance */
.il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */

And with all of this in place, the new post page was ready to go.

One final step was to change my show page for the posts. In the show.html.erb file, I called up my markdown function as defined in application_helper.rb. I passed, my post.body(or in my case post.blob argument), and markdown implementation was complete.

   <div class="post_body">
                <p> <%= markdown(@post.blob) %>  </p>
            </div>

All, of this, seemed really easy to follow through when guided by a tutorial. However, there are many questions in my head. One of them being the one I asked earlier. I still cannot make the connection between how things are working, and most times I am following the valuable tutorials out there.

And again, I look at what is right infront of me, a quote that reads "Work Hard, Be Patient."