如何使用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 valuesvar 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将Markdown转换为JavaScript中的HTML】很容易吧？
使用插件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'

编码愉快！