Markdown Tutorial: How to Add Markdown to Rails App Using Redcarpet and Coderay Gems?

Markdown Tutorial: How to Add Markdown to Rails App Using Redcarpet and Coderay Gems? www.bacancytechnology.com

Writing blogs with markdown is very helpful and easy as markdown takes care of the look of the content. A markdown support blogging app is quite easy in Ruby on Rails because of the redcarpet gem. If you want to add code in your, another gem coderay will help for syntax highlighting.

Introduction

We have seen many blogs having markdown support. We can add links, images, videos, and gifs to any article having markdown support. Thinking about content without worrying about the blog’s presentation makes it easy for bloggers to make great content. In this guide, we will implement a blog app to write articles with markdown support. Active Storage is used in Rails to add support for uploading media (images, videos, and gifs) present in your system that we can add in the article. For now, we can add images, videos, or gifs by using their URL (if they are already present on the web).

Markdown Tutorial Goal

Before implementing the Markdown tutorial using the gems, let’s look at the video and see the output of this tutorial.

Tutorial Takeaways

Exploring Redcarpet and Coderay Gems Adding Markdown to Rails App using gems Github Repository So, now we are clear about what this Markdown Tutorial with Redcarpet and Coderay gems will provide us. Let’s get started on its implementation without further ado and learn how to make a blog app with markdown support.

Initial Setup

Use the below command to create a new Rails app rails new redcarpet-gem-example

Install Redcarpet and Coderay Gems

Add following gems in Gemfile. Redcarpet for markdown support and coderay for syntax, highlighting if any code is present in the markdown.

gem 'redcarpet' gem 'coderay'

Run bundle install to install the above gems for our application.

Generate Articles Scaffold

Generate scaffold for Articles using the following command. Here, we have passed the attributes(columns) added in the Articles table, namely title with string type and content with text type.

rails g scaffold Articles title:string content:text

After generating the scaffold using the above command, a migration file will also be generated. So, we need to migrate the above changes to update the schema to add an Articles table with the title and content column. rails db:migrate

Update Routes

Update config/routes.rb file as following

Rails.application.routes.draw do resources :articles root 'articles#index' end

Logic to Add Markdown

In app/helpers/application_helpers.rb file, add the following code module ApplicationHelper class CodeRayify < Redcarpet::Render::HTML def block_code(code, language) CodeRay.scan(code, language).div end end def markdown(text) coderayified = CodeRayify.new(:filter_html => true, :hard_wrap => true) options = { fenced_code_blocks: true, no_intra_emphasis: true, autolink: true, lax_html_blocks: true } markdown_to_html = Redcarpet::Markdown.new(coderayified, options) markdown_to_html.render(text).html_safe end end

The above code will parse the markdown present in the content and will render it in the view. To implement that, you need to call the markdown() method present in the above code for the content in the view, shown in the next step. Here, you can always add or remove options according to your need. Read the README.markdown file to explore more about markdown options.

Render Markdown in HTML

Update the app/views/articles/show.html.erb with the following content <p id="notice"><%= notice %></p> <h1><%= @article.title %></h1> <hr /> <%= markdown(@article.content) %> <%= link_to 'Edit', edit_article_path(@article) %> | <%= link_to 'Back', articles_path %>

<%= markdown(@article.content)%> will call the markdown() function with the content of the article as the parameter that we wrote inside the application_helpers.rb file in the previous section. Once done, we can see the parsed markdown on our view.

User Interface

Once you are done with the above code, your UI will look something like thisThe UI will display a list of the articles which you can edit or delete. You can also add the article by clicking on New Article.

The UI for adding New Article is shown below-

After clicking the button Create Article, the article will be added automatically-

You can find the entire source code on the Github Repository. Feel free to clone and play around with the code.

Conclusion

So, this was a Markdown tutorial providing a step-by-step guide to add Markdown support to the Rails app using Redcarpet and Coderay gems. If you want to explore more about Ruby on Rails, feel free to visit ROR tutorials, where we have step-by-step tutorials with github repositories.

We at Bacancy provide you best and skilled developers with fundamental and advanced ROR knowledge. Are you looking for a helping hand for your Rails project? If yes, then without wasting any time, contact us to hire ROR developers. We assure you of complete satisfaction and optimized solutions for your requirements.

Thank You

www.bacancytechnology.com