Implement markdown in Rails


This time I am developing a memo application, but I would like to implement memo posting with markdown, and this time I will learn how to do it.

The function I wanted this time ・ Markdown ・ Real-time preview

Introduction of gem

gem 'redcarpet', '~> 2.3.0'
gem 'coderay'
bundle install

Implementation of markdown notation

app/heplers/markdown_helper.rb Create a new file markdown_helper.rb in the above file.


module MarkdownHelper
  def markdown(explanation) #()Enter the column name inside
    options = {
    filter_html: true,
    hard_wrap: true,
    space_after_headers: true,
    with_toc_data: true

    extensions = {
    autolink: true,
    no_intra_emphasis: true,
    fenced_code_blocks: true,
    tables: true

    renderer =
    markdown =, extensions)
    markdown.render(explanation).html_safe #()Column name in

Please refer to the reference site for the contents of options and extensions (such as filter_html). It is written more carefully and should be helpful.

Real-time preview implementation

First, write to read vue.js and marked.js.


<-- Vue.js read description-->
<script src=''></script>
<--marked.js read description-->
<script src=''></script>

view modification



<%= form_with model:note, local: true do |f| %>
  <div class='form-group'>
    <%= f.label :title%>
    <%= f.text_field :title, class: 'form-control', id: 'note_title' %>
  <div class='form-group'>
    <%= f.label :Category%>
    <%= f.collection_select :category_id, Category.all, :id, :name %>
  <div class='form-group'>
    <div id='editor'>
      <%= f.label :Contents%>
      <%= f.text_area :explanation, rows: 5, class: 'form-control', id: 'note_explanation', "v-model" => "input", name: "note[explanation]" %>
    <div v-html='input | marked'></div>
  <%= f.submit 'Registration', class: 'btn btn-success' %>
  <% end %>

  <!--Real-time preview-->
  <script type="text/javascript">
    window.onload = function() {
      new Vue({
      el: '#editor',
      data: {
        input: '<%== j @note.explanation %>',
      filters: {
      marked: marked,

It will be as above, but I will explain partly.

<!--Real-time preview-->
  <script type="text/javascript">
    window.onload = function() {
      new Vue({
      el: '#editor',
      data: {
        input: '<%== j @note.explanation %>',   #Instance variables and column names that you set yourself
      filters: {
      marked: marked,

ʻInput:'<% == j @ note.explanation%>'` is to put note.explanation in the form at the time of edit.

The next difficulty was how to make f.text_area of form_with have v-model input. v- seems to be a description peculiar to Vue.js, and to use it in Ruby tags

"v-model" => "input"

I had to do it as. Since it is separated by-, there was no response even if it was described without "".

Next is the name attribute.

name: "note[explanation]"app name[Column name]

Specify as above.

Finally, it is necessary to describe so that the part described in text_area is displayed.

v-html is also an expression of vue.js.

Here, it is not a ruby tag, but an HTML tag, so there is no problem as it is.

show In my case, I want the show action to show an article in markdown notation, so I'll fix that.

<div class='stretch-text'>
  <h2>title:<%= @note.title %></h2>
  <h2>category:<%= %></h2>
  <h2>Explanation:<%= markdown(@note.explanation) %></h2>   #Fix here
  <%= link_to "To edit", edit_note_path(@note),data: {"turbolinks" => false} %>
  <%= link_to "Delete", note_path(@note), method: :delete %>

The change is markdown (“# {@ note.explanation}).

By doing this, you can read the markdown notation.

This completes!

I think that it can be implemented if it comes to this point.


There are many parts that are lacking in explanation and understanding, but I will update them as soon as I understand them. Also, if there are any mistakes, thank you for your cooperation.

Recommended Posts

Implement markdown in Rails
Implement application function in Rails
Implement follow function in Rails
Implement LTI authentication in Rails
Implement import process in Rails
Implement simple login function in Rails
Implement a contact form in Rails
Implement CSV download function in Rails
Implement Rails pagination
Group_by in Rails
How to implement search functionality in Rails
How to implement ranking functionality in Rails
Implement button transitions using link_to in Rails
Implement share button in Rails 6 without using Gem
Adding columns in Rails
[Rails] Implement search function
Disable turbolinks in Rails
Implement star rating function using Raty in Rails6
CSRF measures in Rails
Implement Rails account BAN
^, $ in Rails regular expression
How to implement a like feature in Rails
Use images in Rails
Implement the Like feature in Ajax with Rails.
Implement CustomView in code
Understand migration in rails
Implement iteration in View by rendering collection [Rails]
Split routes.rb in Rails6
[Rails] Implement rake task
How to implement guest login in 5 minutes in rails portfolio
How to implement a like feature in Ajax in Rails
[Rails] Implement credit card registration / deletion function in PAY.JP
Introduce devise in Rails to implement user management functionality
Implement user follow function in Rails (I use Ajax) ②
Get UserAgent in [Rails] controller
[Rails] Implement User search function
Declarative transaction in Rails #ginzarb
[Beginner] Implement NavigationBar in code
Implement two-step verification in Java
Japaneseize using i18n with Rails
Implement Basic authentication in Java
Error in rails db: migrate
Gem often used in Rails
Implement math combinations in Java
Display Flash messages in Rails
2 Implement simple parsing in Java
Implement Email Sending in Java
View monthly calendar in Rails
Implement Swift UITextField in code
Implement functional quicksort in Java
[Rails] How to implement scraping
[Rails] Implement image posting function
Implement rm -rf in Java.
Implement XML signature in Java
Implement login function in Rails simply by name and password (1)
Implement login function in Rails simply by name and password (2)
Implement login function simply with name and password in Rails (3)
Implement user registration function and corporate registration function separately in Rails devise
Implement Table Driven Test in Java 14
Implement textField focus-out event in JavaFX
[Rails] A simple way to implement a self-introduction function in your profile