Markdown Tutorial: How to add Markdown to the Rails app using Redcarpet and Coderay Gems?

We've seen a lot of Markdown-enabled blogs. We can add links, pictures, videos, and gifs to any Markdown-enabled article. By thinking about content without depressing blog presentations, bloggers can create excellent content with ease. We will be implementing a blog application for writing articles with Markdown assistance. Active Room is used in Rails to add help for storing media present on your system, which we can add in this article. We can now add media using their URLs.

Tutorial takeaway

Examining the Redcarpet and Coderay Gems

Adding Markdown to Rails Apps

Using Gems Github Repository

So now it's obvious what this Markdown tutorial with the Redcarpet and Coderay gems will give us.

Initial Composition

Implement the following code to generate a new Rails app

rails new redcarpet-gem-example

Installing Redcarpet and Coderay Gems

Add the following gems to Gemfile.Redcarpet to support and highlight the syntax encoding by highlighting them in markup.

gem 'redcarpet'

gem 'coderay'

Creating a framing element

Create a framing element applying the subsequent code. Here we have passed the properties (columns) to be added to the message table, that is, a header with a string type and a body with a text type.

rails g scaffold Articles title:string content:text

After creating the header with the above code, we will also create a migration folder, so we are required to roll over the above modifications to update the schema and add the articles table with header and content columns.

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 markup present in the content and display it in the view. To do this, you must call the markdown () process included in the above code on the view content displayed in the next step. Here you can always add or subtract choices according to your needs. Read the README.markdown file to learn more about Markdown options.

Render Markdown in HTML

Update the app/views/articles/show.html.erb with the subsequent 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 article content as a parameter that we wrote in the app_helpers.rb file in the earlier part. In our opinion, you can see the breakdown.

UI

Once you're done with the code above, your UI will look similar to this

UI showing a list of items that you can edit or delete. The articles are added immediately after you click on the new article button.

You can see the UI in the image below

The publication will be added automatically after you click on create publication button

So here's a guide to adding Markdown to a Rails app using the Redcarpet and Coderay gems. If you'd like to learn more about Ruby on Rails, visit the ROR tutorial, where you can get step-by-step instructions of tutorials in the github repository. If you have a rails project in mind you should contact the best and skilled Ruby on Rails development company that can help you with your project and work according to your needs and requirements.