Introduction

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.

`markdown_helper.rb`


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 = Redcarpet::Render::HTML.new(options)
    markdown = Redcarpet::Markdown.new(renderer, extensions)
    markdown.render(explanation).html_safe #()Column name in
  end
end

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.

`application.html.erb`


<-- Vue.js read description-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js'></script>
<--marked.js read description-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js'></script>

view modification

new

`_form.html.erb`


<%= 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>
  <div class='form-group'>
    <%= f.label :Category%>
    <%= f.collection_select :category_id, Category.all, :id, :name %>
  </div>
  <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>
  </div>
  <%= f.submit 'Registration', class: 'btn btn-success' %>
  </div>
  <% end %>

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

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,
      },
      });
    };
  </script>

ʻ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:<%= @note.category.name %></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 %>
</div>

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.

Finally

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.

Implement markdown in Rails