Rails 5 渲染 Markdown 及实现代码高亮
Rails 5 渲染 Markdown 及实现代码高亮
Markdown 是一种很方便易学、功能强大、纯文本格式的标记语言。可以让你专注于写作，不会因考虑「如何排版」而分心。而在 Rails 中如何将 Markdown 文本渲染输出以及如何实现代码高亮显示呢？
主要实现的思路
将 Markdown 格式的文本通过 Redcarpet 渲染输出；再利用 Coderay 或 Rouge 等实现代码高亮。
Markdown 的文本是纯文本的格式，就像下面：
# 一级标题
## 二级标题
列表
* 项目一
* 项目二
* 项目三
而要让这些纯文本的文字能与预先设定的样式对应起来，则需先把上述纯文本通过某种机制处理成 HTML 格式的文本，这样就可以应用 CSS 了。
这时，我们就需要用到 Redcarpet (https://github.com/vmg/redcarpet) 。
而为了让 Markdown 文本中的各种语言的代码能够根据关键字等呈现相应的颜色，即代码亮亮显示，我们又要用到 Coderay 或 Rouge 。
下面就分 Coderay 与 Rouge 两种方法来分别实现上述功能。
使用 Redcarpet 与 Coderay
安装 gem
在 Gemfile 中添加如下语句：
gem 'redcarpet'
gem 'coderay'
并执行后重启 Rails：
bundle install
写 markdown 的 helper
moduleApplicationHelper# for markdownclassHtmlWithCoderay<Redcarpet::Render::HTMLdefblock_code(code,language)CodeRay.scan(code,language).div()endenddefmarkdown(text)render_options={filter_html: true,hard_wrap: true,with_toc_data: true,link_attributes: {rel: 'nofollow',target: '_blank'}}html_with_coderay=HtmlWithCoderay.new(render_options)options={:fenced_code_blocks=>true,:no_intra_emphasis=>true,:autolink=>true,:tables=>true,:strikethrough=>true,:lax_html_blocks=>true,:superscript=>true}markdown_to_html=Redcarpet::Markdown.new(html_with_coderay,options)markdown_to_html.render(text).html_safeend# end: markdownend
如果想显示代码的行号，只要将
CodeRay.scan(code, language).div()
替换成：
CodeRay.scan(code, language).div(line_numbers: :table)
用于代码高亮的样式
可将该链接下的样式复制
https://gist.github.com/booox/7e31fd73c07643a16f96a687b51f2728#file-coderay-css
粘贴到新建的 vendor/assets/stylesheets/coderay.css 中
并在 app/assets/stylesheets/application.scss 中 添加如下代码即可：
@import "coderay";
View 中使用 markdown
这样，在 view 中就可以使用 markdown 这个 helper 了。
<%= markdown(@content) %>
使用 Redcarpet 与 Rouge
Rouge 与 Coderay 相比起来，支持的语言更多一些
安装 gem
在 Gemfile 中添加如下语句：
gem 'redcarpet'
gem 'rouge', '~> 3.2'
并执行后重启 Rails：
bundle install
写 markdown 的 helper
这里与上面有些不一样，需要创建一个新的文件
app/helpers/rouge_helper.rb
moduleRougeHelperrequire'redcarpet'require'rouge'require'rouge/plugins/redcarpet'classHtmlWithRouge<Redcarpet::Render::HTMLincludeRouge::Plugins::Redcarpetenddefmarkdown(text)render_options={filter_html: true,hard_wrap: true,link_attributes: {rel: 'nofollow',target: '_blank'}}renderer=HtmlWithRouge.new(render_options)extensions={autolink: true,fenced_code_blocks: true,lax_spacing: true,no_intra_emphasis: true,strikethrough: true,tables: true,superscript: true}markdown=Redcarpet::Markdown.new(renderer,extensions)markdown.render(text).html_safeendend
用于代码高亮的样式
可将该链接下的样式复制
https://gist.github.com/booox/7e31fd73c07643a16f96a687b51f2728#file-rouge_github-css
粘贴到新建的 vendor/assets/stylesheets/rouge_github.css 中
并在 app/assets/stylesheets/application.scss 中 添加如下代码即可：
@import "rouge_github";
或者在命令行下输入如下内容：
> rougify style github > rouge_github.css
而更多的样式，可以查看下面的链接：
https://github.com/jneen/rouge/tree/master/lib/rouge/themes
View 中使用 markdown
这里与上面一样了，在 view 中就可以使用 markdown 这个 helper 了。
<%= markdown(@content) %>
Markdown 渲染所用样式表
除了上述用于代码高亮的样式表之外，Markdown 渲染后的 HTML 代码还需要对应的样式
可将该链接下的样式复制
https://gist.github.com/booox/7e31fd73c07643a16f96a687b51f2728#file-github-markdown-css
粘贴到新建的 app/assets/stylesheets/github-markdown.css 中
并在 app/assets/stylesheets/application.scss 中 添加如下代码即可：
@import "github-markdown";
转自：https://booox.github.io/2018/08/07/rails-markdown-syntax-highlight-with-redcarpet/
