Ruby on Rails и простейшая разметка - Markdown

Во время написания этого блога, возникла задача возможности оставлять комментарии под постом. Но строчить обычный plain-текст не интересно, поэтому я встроил простой язык разметки Markdown.
В этой статье я раскажу о самом простом способе сделать это.


Задачу можно разделить на две части:

  1. Создание markdown-редактора для пользователей, оставляющих комментарии.
  2. Парсинг разметки и вывод комментариев.

И, как вы наверное уже догадались, для решения обеих задач уже есть Гемы =)


Парсер

Для начала разберёмся с парсером. Гем redcarpet умеет парсить и рендерить markdown. Добавим его в Gemfile:

gem 'redcarpet'

Теперь создадим хелпер, который выведет текст:

module MarkdownHelper
  def markdown(text)
    renderer = Redcarpet::Render::HTML.new(hard_wrap: true, filter_html: true)
    options = {
        no_intra_emphasis: true,
        fenced_code_blocks: true,
        superscript: true,
        space_after_headers: true
    }
    Redcarpet::Markdown.new(renderer, options).render(text).html_safe
  end
end

Можно указать другие опции для парсера, на официальной странице на Гитхабе есть подробное описание (Ссылка выше).

Теперь можно рендерить текст комментария:

Текст комментария:
.comment
  = markdown(comment.text)

Markdown - Редактор

Для создания редактора используем гем rails-bootstrap-markdown.

Добавим его в Gemfile:

gem 'rails-bootstrap-markdown'

Понадобится прореквайрить соответствующие файлы скриптов и стилей. В assets/javascripts/application.js добавляем:

//= require bootstrap-markdown-bundle

В assets/stylesheets/application.css.scss добавляем:

*= require bootstrap-markdown

Теперь, всё, что необходимо - это просто навесить на textarea с текстом комментария соответствующий аттрибут:

data-provide='markdown'

В итоге получился вот такой симпатичный редактор:

Плюс в нём имеется предпросмотр и полноэкранный режим.


30.11.2014
Обсуждение недоступно