本文概述
- 要求
- 使用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'
编码愉快!
推荐阅读
- 如何使用JavaScript从URL检索所有或特定的get参数
- 如何使用Java AWT创建和显示Windows 10通知
- 如何在浏览器中使用JavaScript将HTML SVG节点转换为Base64
- 如何检查PhantomJS收到了哪些Web资源
- 在JavaScript中从JSON创建可折叠树结构到HTML
- cocos2d-x从c++到js19(CoffeeScript开发环境搭建续)
- 一起玩转树莓派——从双色LED灯开始
- cocos2d-x从c++到js20(脚本语言风格的JS代码)
- cocos2d-x从c++到js21(使用CocosCode调试JSB)