如何使用Remarkable将Markdown转换为JavaScript中的HTML

本文概述

• 要求
• 使用Remarkable
• 代码语法高亮
• 使用插件

Markdown是Internet上最常用的轻量级标记语言之一。它非常适合一部分任务, 主要是博客文章和评论。 Markdown仅需几个额外的字符, 即可使丰富的文档格式变得快速, 美观。 Markdown可以通过许多编程语言转换为HTML, 当然我们不能忘记我们喜爱的Javascript。如果要在浏览器, Node.js或其他Javascript运行时中使用Javascript将markdown轻松转换为HTML, 则建议你使用Remarkable。

出色的降价解析器非常出色。它确实快速且易于扩展, 因为它以单态风格编写并有效使用了JIT内联缓存, 因此灵活性方面并没有付出代价。它具有可配置的语法, 这意味着你可以添加新规则, 甚至替换现有规则。它遵循CommonMark规范。

要求

要将markdown轻松地转换为Javascript中的HTML, 你将需要如前所述的Remarkable。你可以使用NPM下载该库：

npm install remarkable --save

或使用凉亭：

bower install remarkable --save

或者, 如果你不使用包管理器, 请使用CDN(或从Github的存储库中下载脚本)：

<script src="https://cdn.jsdelivr.net/remarkable/1.7.1/remarkable.min.js"></script>

有关该库的更多信息, 请访问此处的官方Github存储库。

使用Remarkable

在以下示例中, remarkable可以很容易地以其最基本的表达式表示：

// If you use require (Node etc), require as first the module and then create the instance
var Remarkable = require('remarkable');
// If you're in the browser, the Remarkable class is already available in the window
var md = new Remarkable();

// Outputs: <h1>Remarkable rulezz!</h1>
console.log(md.render('# Remarkable rulezz!'));

可配置Remarkable以使其与Github风味Markdown相同, 但是不允许HTML标记。你可以在构造函数中或使用set方法来自定义Remarkable。

注意

如果你担心应用程序的性能, 为获得最佳性能, 请不要动态修改Remarkable实例。如果需要多个配置, 请创建多个实例, 并使用最适合该实例的配置对其进行初始化。

定制Remarkable的构造函数

如前所述, 你可以通过构造函数修改非凡的选项：

// Actual default values

var md = new Remarkable({
    html: false, // Enable HTML tags in source
    xhtmlOut: false, // Use '/' to close single tags (<br />)
    breaks: false, // Convert '\n' in paragraphs into <br>
    linkify: false, // Autoconvert URL-like text to links

    // Enable some language-neutral replacement + quotes beautification
    typographer: false, // Double + single quotes replacement pairs, when typographer enabled, // and smartquotes on. Set doubles to '«»' for Russian, '„"' for German.
    quotes: '""‘’'
});

console.log(md.render('# Remarkable rulezz!'));

通过设置方法定制Remarkable

另外, 你可以使用set方法动态修改属性：

var md = new Remarkable();

md.set({
    html: true, breaks: true
});

代码语法高亮

默认情况下, 与github一样, 非凡的过程代码段也是如此, 例如以下标记：

# Remarkable rulezz!

```javascript 
alert(window.location.host)
```

将转换为以下HTML：

<h1>Remarkable rulezz!</h1>
<pre>
    <code class="language-javascript">alert(window.location.host)</code>
</pre>

借助Prism.js或HighlightJS插件, 可以轻松突出显示代码。但是, 如果你想直接返回突出显示的标记(已经使用突出显示跨度格式化的代码), 则可以使用突出显示功能, 该功能允许你自定义代码字符串的处理方式(此功能在服务器中特别有用)方面, 例如NodeJS)。以下示例显示如何使用HighlightJS直接突出显示代码：

注意

高亮显示应返回转义的HTML或””(如果源字符串未更改)。

var md = new Remarkable({
    // Modify the generated HTML by highlighting the code directly
    highlight: function (str, lang) {
        if (lang && hljs.getLanguage(lang)) {
            try {
                return hljs.highlight(lang, str).value;
            } catch (err) {}
        }

        try {
            return hljs.highlightAuto(str).value;
        } catch (err) {}

        return ''; // use external default escaping
    }
});

// rest of your code

在带有markdown示例的情况下, 应生成以下HTML：

<h1>Remarkable rulezz!</h1>
<pre>
    <code class="language-javascript">alert(<span class="hljs-built_in">window</span>.location.host)</code>
</pre>

很容易吧？

使用插件

Remarkable允许你使用插件, 甚至创建自己的插件。要仅在Remarkable中注册它们, 请使用use方法：

var md = new Remarkable();

md.use(plugin1)
  .use(plugin2, opts)
  .use(plugin3);

例如, 要添加漂亮的插件(使用自定义渲染器规则使用带有Remarkable的美化降价功能), 你可以简单地使用以下代码：

var prettify = require('pretty-remarkable');
var Remarkable = require('remarkable');
var md = new Remarkable();

// register the plugin
md.use(prettify);

// use
var result = md.render('\n\n\n# foo\n\n\nbar\n# baz');
//=> '# foo\n\nbar\n\n# baz'

编码愉快！