Markdown 格式化内容

开发过程就是不断解决实际使用中的痛苦的过程。来看看评论的功能，如果发布的内容我想加一个空行，但是实际输出还是会在一段之中。所以来添加 Markdown 格式的支持。

使用 Redcarpet

首先在 Gemfile 中添加 redcarpet

gem 'redcarpet'

bundle 一下，可以看到 Gemfile 中安装的版本是 3.2.0 。未来如果版本有了大的变化，那么下面使用的接口可能也会边，以官方 README 为准。

再到 _comment.html.erb 中来使用一下

- <%= c.content %>
+ <%= markdown(c.content) %>

issues/show.html.erb 中的活动内容也做相同对待

- <%= @issue.content %>
+ <%= markdown(@issue.content) %>

需要到 application_helper.rb 中来定义 markdown

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
  }
  Redcarpet::Markdown.new(renderer, options).render(text).html_safe
end

这些都是安照，官方 README 来写的。具体每个参数的意义都可以在页面上找到。

说说上面的 html_safe 的作用，如果去掉，页面中刷新会出现 html 标签，这是一种安全机制，防止有人嵌入 html 代码来实现对网站的攻击。不过前面 filter_html: true 已经过滤掉了可能导致安全隐患的 html 标签。所以就可以放心的来添加 .html_safe 来让 Rails 放弃这种安全机制了。

用 pygment 实现代码高亮

Gemfile 中添加 pygemnt.rb

gem 'pygments.rb'

到 application_helper.rb 中添加

class HTMLwithPygments < Redcarpet::Render::HTML
  def block_code(code, language)
    Pygments.highlight(code, lexer: language)
  end
end

def markdown(text)
- renderer = Redcarpet::Render::HTML.new(hard_wrap: true, filter_html: true)
+ renderer = HTMLwithPygments.new(hard_wrap: true, filter_html: true)
  ...
end

添加 css

创建一个新文 app/assets/stylesheets/shared/pygment.css.erb

<%= Pygments.css(:style => "monokai") %>

接下来，需要调整一下评论框的 css 来让整个显示的漂亮一点，参考 laracasts forum

issue_show.css.scss 中

.body {
- padding: 15px;
+ padding: 15px 40px 10px 40px;
  .highlight {
    margin-top: 15px;
    background: #2D3037;
    padding: 5px 40px;
    margin-left: -40px;
    margin-right: -40px;
    pre {
      margin-top: 9px;
    }
  }
  textarea {
    border: none;
    height: 230px;
    margin-top: -20px;
  }
}

这样就可以了。

Rails 技巧库