Adding Markdown to your Rails application

In this guide I will show you how to add markdown to your rails application. We will use redcarpet gem and I assume that you have created your rails application that we will work on.

Install redcarpet

To install redcarpet gem go to your Gem…

In this guide I will show you how to add markdown to your rails application. We will use redcarpet gem and I assume that you have created your rails application that we will work on.



Install redcarpet

To install redcarpet gem go to your Gemfile and add:

# Gemfile 
gem "redcarpet"

then run the following command:

$ bundle install



Generating a resource

After we succesfully installed our gem, we need a recource to work with and test our work, so we will create Post scaffold to work with.

To create the Post scaffold run the following commands:

$ rails generate scaffold Post title:string body:text
$ rails db:migrate



Extracting logic to a helper

After we succesfully installed redcarpet gem and created our scaffold it’s the time to add markdown to our application.

In order to be DRY (don’t repeat yourself) we will create a helper method to use whenever we want to add markdown. So in our application_helper.rb we will add the following code:

def markdown(text)
    options = %i[
      hard_wrap autolink no_intra_emphasis tables fenced_code_blocks
      disable_indented_code_blocks strikethrough lax_spacing space_after_headers
      quote footnotes highlight underline
    ]
    Markdown.new(text, *options).to_html.html_safe
  end

This method titeled markdown will take a text as an argument and will be the output of Post body feild. Notice the options variable defined with an array of settings you can pass to Redcarpet. These dictate what you do and don’t want when it comes to rendering markdown within your app.

Now let’s use this helper in our views

<p id="notice"><%= notice %></p>

<p>
  <strong>Title:</strong>
  <%= @post.title %>
</p>

<p>
  <strong>Body:</strong>
  <%= markdown(@post.body) %>
</p>

<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>

And congratulation you have added markdown to your application.


Print Share Comment Cite Upload Translate
APA
AbdUlRahman Shawareb | Sciencx (2024-03-29T09:56:54+00:00) » Adding Markdown to your Rails application. Retrieved from https://www.scien.cx/2021/06/08/adding-markdown-to-your-rails-application/.
MLA
" » Adding Markdown to your Rails application." AbdUlRahman Shawareb | Sciencx - Tuesday June 8, 2021, https://www.scien.cx/2021/06/08/adding-markdown-to-your-rails-application/
HARVARD
AbdUlRahman Shawareb | Sciencx Tuesday June 8, 2021 » Adding Markdown to your Rails application., viewed 2024-03-29T09:56:54+00:00,<https://www.scien.cx/2021/06/08/adding-markdown-to-your-rails-application/>
VANCOUVER
AbdUlRahman Shawareb | Sciencx - » Adding Markdown to your Rails application. [Internet]. [Accessed 2024-03-29T09:56:54+00:00]. Available from: https://www.scien.cx/2021/06/08/adding-markdown-to-your-rails-application/
CHICAGO
" » Adding Markdown to your Rails application." AbdUlRahman Shawareb | Sciencx - Accessed 2024-03-29T09:56:54+00:00. https://www.scien.cx/2021/06/08/adding-markdown-to-your-rails-application/
IEEE
" » Adding Markdown to your Rails application." AbdUlRahman Shawareb | Sciencx [Online]. Available: https://www.scien.cx/2021/06/08/adding-markdown-to-your-rails-application/. [Accessed: 2024-03-29T09:56:54+00:00]
rf:citation
» Adding Markdown to your Rails application | AbdUlRahman Shawareb | Sciencx | https://www.scien.cx/2021/06/08/adding-markdown-to-your-rails-application/ | 2024-03-29T09:56:54+00:00
https://github.com/addpipe/simple-recorderjs-demo