简介
markdown-it-highlightjs 是一款基于 markdown-it 和 highlight.js 的 npm 包，可以实现 markdown 语法的渲染，并对代码块进行高亮显示。本篇文章将介绍如何使用 markdown-it-highlightjs。
安装
在终端运行以下命令进行安装：
npm install markdown-it markdown-it-highlightjs highlight.js
其中，markdown-it 是 markdown 解析器，markdown-it-highlightjs 是 markdown-it 的插件，highlight.js 是代码高亮工具。
使用
在代码中引入相应的模块：
-- -------------------- ---- -------
----- -------- - -----------------------
----- --------- - ------------------------
----- -- - ----------
---------- -------- ----- ----- -
-- ----- -- ---------------------------- -
--- -
------ ------------------------- -----------
- ----- ---- --
-
------ --- -- -----------
-
---
----- --- - -----------------------------------
------------以上代码中，我们首先引入了 markdown-it、highlight.js 和 markdown-it-highlightjs 三个模块。然后，我们创建了一个 markdown 实例，并在其中通过 highlight 配置了代码高亮。最后，我们引入了 markdown-it-highlightjs 插件，并将其使用在 markdown 实例中。
接下来，我们可以使用 markdown 实例的 render 方法将 markdown 字符串渲染成 HTML：
const result = md.render('# Hello, world!\n```js\nconsole.log("Hello, world!");\n```');
console.log(result);以上代码中，我们将以下 markdown 字符串渲染成了 HTML：
<h1>Hello, world!</h1> <pre><code class="hljs language-js"><span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Hello, world!"</span>); </code></pre>
在渲染代码块时，markdown-it-highlightjs 会根据代码中指定的语言对代码进行高亮。在以上代码中，我们将代码块的语言指定为了 js，markdown-it-highlightjs 会根据 highlight.js 提供的规则对 js 代码进行高亮。
深入探究
markdown-it-highlightjs 的实现原理并不复杂。我们可以对以上代码进行逐行解读：
-- -------------------- ---- -------
----- -- - ----------
---------- -------- ----- ----- -
-- ----- -- ---------------------------- -
--- -
------ ------------------------- -----------
- ----- ---- --
-
------ --- -- -----------
-
---在这段代码中，我们配置了一个 highlight 回调函数，并将其传递给 markdown。当 markdown 渲染代码块时，就会调用这个函数对代码进行高亮。
函数接收两个参数：str 和 lang。其中，str 表示代码块的代码，lang 表示代码块的语言。
在函数中，我们首先判断 lang 是否存在，并且该语言是否被 highlight.js 支持。如果语言被支持，我们就使用 highlight.js 对代码进行高亮，并返回高亮后的代码。如果语言不被支持，我们则返回空字符串，表示使用 markdown-it 外部默认的代码高亮方案。
const mdh = require('markdown-it-highlightjs');
md.use(mdh);而这段代码则是用于引入 markdown-it-highlightjs 插件，并将其使用在 markdown 实例中。插件的作用是让 markdown-it 支持代码高亮，并与 highlight.js 整合起来。简单而言，插件的实现原理就是在 markdown-it 的 highlight 回调函数中调用 highlight.js 进行代码高亮，然后将高亮后的代码插入到 HTML 中。
示例代码
为了方便大家理解 markdown-it-highlightjs 的使用方法，以下是一个示例代码：
-- -------------------- ---- -------
----- -------- - -----------------------
----- --------- - ------------------------
----- -- - ----------
---------- -------- ----- ----- -
-- ----- -- ---------------------------- -
--- -
------ ------------------------- -----------
- ----- ---- --
-
------ --- -- -----------
-
---
----- --- - -----------------------------------
------------
----- ------ - ------------ ------ ---------------------------------- -----------------
--------------------运行以上代码，输出结果为：
<h1>Hello, world!</h1> <pre><code class="hljs language-js"><span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Hello, world!"</span>); </code></pre>
总结
以上就是 markdown-it-highlightjs 的使用教程。在实际开发中，我们可以通过该 npm 包轻松实现 markdown 渲染和代码高亮。同时，理解 markdown-it-highlightjs 的实现原理，可以帮助我们更好地进行定制化需求和应对一些较为复杂的场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67466