Markdown markup in a RubyOnRails application

In one new project, written in ruby ​​on rails, the task was set to enable the user to use markdown markup to format text. One of the implementation options described in this article.

The article does not describe the basics of ruby ​​on rails. I mean that the reader can create a project and run it in his favorite IDE / from the console / else how. Plus at the end of the article there is a link to the source code of the demonstration project.
One clarification: I use haml for view-shek and twitter bootstrap for decoration.
Suppose we have an application. And we need to add the class “Article” with the title and content fields. The field contents will be of type text . Then we need to apply markdown markup to it.

Add our class and at the same time the controller and view-shki

rails generate scaffold Post title content:text rake db:migrate 

---

Markdown parser

As a parser we use redcarpet

 # Gemfile ... gem "redcarpet" 

Add a helper to display text using markdown markup.

 # app/helpers/application_helper.rb module ApplicationHelper def markdown(text) renderer = Redcarpet::Render::HTML.new(hard_wrap: true, filter_html: true) options = { autolink: true, no_intra_emphasis: true, fenced_code_blocks: true, lax_html_blocks: true, strikethrough: true, superscript: true, space_after_headers: true } Redcarpet::Markdown.new(renderer, options).render(text).html_safe end end 

Redcarpet :: Markdown is the markdown parser itself. Redcarpet :: Render :: HTML is one of the renderers. Specifically this one generates html from markdown markup. If you wish, you can write your renderer or inherit from existing ones. Possible values ​​of options for the renderer and parser can be found in the documentation .

Use helper to display content

 -# app/views/posts/show.html.haml %h3= @post.title %p= markdown(@post.content) = link_to 'Edit', edit_post_path(@post) \| = link_to 'Back', posts_path 

Now if we create an article with the following content

 > this is quotes List: - item 1 - item 2 - item 3 [this is link](http://example.com) ![image](http://placehold.it/350x150) ``` class Cat < Animal def say "Meow!" end end ``` 

then we will see something like the following picture

')

---

Markdown Editor

Add a visual editor MarkItUp to the project. You can use the markitup-rails gem for this.

 # Gemfile ... gem 'markitup-rails' 

 # app/assets/javascripts/application.js … //= require markitup … 

 // app/assets/stylesheets/application.css.scss … @import "markitup"; @import "markitup-markdown"; 

Finally, we apply the editor to our text field in the article editing form.

 # app/assets/javascripts/posts.js.coffee jQuery -> markdownSettings = { previewParserPath: '/markdown/preview' onShiftEnter: {keepDefault:false, openWith:'\n\n'} markupSet: [ { name:'First Level Heading', key:'1', placeHolder:'Your title here...', closeWith: (markItUp) -> markdownTitle(markItUp, '=') }, { name:'Second Level Heading', key:'2', placeHolder:'Your title here...', closeWith: (markItUp) -> markdownTitle(markItUp, '-') }, {name:'Heading 3', key:'3', openWith:'### ', placeHolder:'Your title here...' } {name:'Heading 4', key:'4', openWith:'#### ', placeHolder:'Your title here...' } {name:'Heading 5', key:'5', openWith:'##### ', placeHolder:'Your title here...' } {name:'Heading 6', key:'6', openWith:'###### ', placeHolder:'Your title here...' } {separator:'---------------' } {name:'Bold', key:'B', openWith:'**', closeWith:'**'} {name:'Italic', key:'I', openWith:'_', closeWith:'_'} {separator:'---------------' } {name:'Bulleted List', openWith:'- ' } {name:'Numeric List', openWith: (markItUp) -> markItUp.line+'. ' } {separator:'---------------' } { name:'Picture', key:'P', replaceWith:'![[![Alternative text]!]]([![Url:!:http://]!] "[![Title]!]")' }, { name:'Link', key:'L', openWith:'[', closeWith:']([![Url:!:http://]!] "[![Title]!]")', placeHolder:'Your text to link here...' }, {separator:'---------------'} {name:'Quotes', openWith:'> '} {name:'Code Block / Code', openWith:'(!(\t|!|`)!)', closeWith:'(!(`)!)'} {separator:'---------------'} {name:'Preview', call:'preview', className:"preview"} ] } markdownTitle = (markItUp, char) -> heading = ''; n = $.trim(markItUp.selection||markItUp.placeHolder).length; for i in [0..n] heading += char '\n'+heading $('#post_content').markItUp(markdownSettings) 

where post_content is the id of the text field. Editor settings (markdownSettings) are taken from the documentation .
And now the edit form looks like this.

---

Preview

Pay attention to one line.

 # app/assets/javascripts/posts.js.coffee ... previewParserPath: '/markdown/preview' 

This is the path to the server page that will generate a preview. We implement it

 # app/controllers/markdown_controller.rb class MarkdownController < ApplicationController def preview @text = params[:data] end end 

 -# app/views/markdown/preview.html.haml = markdown(@text) 

 # config/routes.rb ... post "markdown/preview" 

And now we have a working preview (with the above settings it is called up by the last button on the editor panel)

Useful links:

• Markdown
• Redcarpet
• MarkItUp
• Project sources from this article
• Our new project , where you can see the real application of the algorithm described in the article