尝试在Rails中使用marked.js


我通过参考本文创建了Markdown的预览功能。
在Rails中实现降价的实时预览
但是，我一开始对所使用的库一无所知，所以我想把它留作备忘录。

我正在使用以下两个库，但是这次我将介绍marked.js。

  • marked.js
  • vue.js

Ruby和Rails的版本如下。

  • Ruby 2.3.1
  • Rails 5.0.0.1

官方文件

单击此处查看marked.js本身的文档。
https://github.com/chjj/已标记
单击此处获取marked.jsruby文档。
https://github.com/rosscooperman/marked-rails

安装

添加到

Gemfile并安装。

ruby文件

1
gem 'marked-rails'
1
$ bundle install

将以下内容添加到

application.js。
(如果是Rails 3.1或更高版本，则可以由Asset Pipeline读取，因此似乎不需要单独安装。)

application.js

1
//= require marked

在Rails上的安装现已完成。

实际使用

请参阅marked.js的官方文档并尝试使用它。
创建一个适当的视图(这次将其称为索引)并编写以下内容。

index.html.erb

1
2
3
4
5
6
<div id="content"></div>
<script>
  console.log(marked('I am using __markdown__.'));
  document.getElementById('content').innerHTML =
      marked('# Marked in browser\n\nRendered by **marked**.');
</script>

由于Gem已经安装了标记，因此可以使用marked方法。
这是浏览器中显示的结果。
スクリーンショット 2017-02-07 11.52.52.png

相反，如果没有marked方法，将如下所示。

1
2
document.getElementById('content').innerHTML =
      '# Marked in browser\n\nRendered by **marked**.';

スクリーンショット 2017-02-07 11.56.27.png

不会听到Markdown，它会以简单的字符串形式输出。
我尝试了一些Markdown，但基本输出正常。
日语Markdown用户组

关于选件

看来您也可以设置一些选项。
由于尚未对其进行详细调查，因此我将编写设置代码。
另外，关于突出显示，在官方文档的示例中，将node-pygmentize-bundled和Highlight.js链接在一起。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  marked.setOptions({
    // コードのハイライト(今回は割愛)
    highlight: function (code, lang, callback) {
      require('pygmentize-bundled')({ lang: lang, format: 'html' },
                                     code, function (err, result) {
        callback(err, result.toString());
      });
    },
    // Githubっぽいmd形式にするか
    gfm: true,
    // Githubっぽいmdの表にするか
    tables: true,
    // Githubっぽいmdの改行形式にするか
    breaks: false,
    // Markdownのバグを修正する？(よく分からなかったので、とりあえずdefaultのfalseで)
    pedantic: false,
    // HTML文字をエスケープするか
    sanitize: true,
    // スマートなリストにするか。pedanticと関わりがあるようなので、こちらもdefaultのtrueで。
    smartLists: true,
    // クオートやダッシュの使い方。
    smartypants: false,
  });