1. 什么是 markedify
markedify 是一个将 marked 渲染的 Markdown 文本转换为带 syntax highlighting 的 HTML 输出的 npm 包。
2. 安装
npm i markedify
3. 使用
3.1 构建 markedify 实例
const Markedify = require('markedify');
const markedify = new Markedify({
codeClassPrefix: 'language-'
});codeClassPrefix 是可选的，它定义了渲染出的 code block 的 CSS 类的前缀。举个例子，如果你将 codeClassPrefix 设置为 language-，那么如下的 Markdown：
def hello puts 'Hello, world!' end
将会被转换成这样的 HTML：
<pre><code class="language-ruby"> def hello puts 'Hello, world!' end </code></pre>
3.2 渲染 Markdown
使用 markedify.render 方法来渲染 Markdown。这个方法接收一个字符串作为参数，返回一个字符串。如下所示：
const md = '# Hello, world!'; const html = markedify.render(md);
3.3 渲染选项
markedify 渲染的选项可以在构建 markedify 实例时传入。这里列举一些常用的选项。
3.3.1 codeClassPrefix
定义了渲染出的 code block 的 CSS 类的前缀。如上所示。
3.3.2 codeClassName
定义了渲染出的 code block 的 CSS 类的名字。
3.3.3 codeBlockRenderer
指定一个函数作为渲染 code block 的方法。这个函数接收两个参数：code 和 lang，分别表示代码和语言（可能为空）。函数返回一个字符串，即渲染后的 HTML。如下所示：
-- -------------------- ---- -------
----- --------- - --- -----------
------------------ ------ ----- -- -
----- -- - ------------------------
-- ----- -- --------------------- -
------ ------------------ ------------
-
------ -----------------------------
-
---这个例子使用了 highlight.js 包来对代码进行 syntax highlighting。
3.4 示例代码
下面是一个完整的示例代码。它读取一个 Markdown 文件，将其渲染为带 syntax highlighting 的 HTML，然后将结果写入一个 HTML 文件中。
-- -------------------- ---- -------
----- -- - --------------
----- ---- - ----------------
----- --------- - ---------------------
----- ------ - -------------------- -------------
----- -------- - -------------------- ---------------
----- --------- - --- -----------
---------------- ------------
------------------ ------ ----- -- -
----- -- - ------------------------
-- ----- -- --------------------- -
------ ------------------ ------------
-
------ -----------------------------
-
---
------------------- ------- ----- --- -- -
-- ----- -
--------------------- -- ---- -------- ------- -----
-------
-
----- ---- - ---------------------
---------------------- ----- --- -- -
-- ----- -
--------------------- -- ----- ---- ------- -----
-------
-
----------------- ---- -- ---------- ----------
---
---4. 总结
markedify 是一个非常有用的 npm 包，可以让我们快速地将 Markdown 文本转换为带 syntax highlighting 的 HTML，方便我们在 Web 应用中展示文本。
在使用 markedify 时，我们可以根据自己的需要配置选项或自定义渲染方法以达到想要的效果。
希望这篇文章能够让你更好地了解 markedify，也希望你能够在实践中取得更进一步的进展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5efee456403f2923b035bbf8