HTML 是前端开发中不可避免的一部分，而 Markdown 是 HTML 的一种更加简洁、易读的语法。而 markdown-it 是一款 JavaScript 的解析器，可以方便地将 Markdown 转化成 HTML，但是默认情况下 markdown-it 并不支持代码高亮。为了解决这个问题，我们可以使用一款叫做 markdown-it-highlightjs-external 的 npm 包来实现代码高亮功能。
安装
首先，我们需要使用 npm 命令来安装 markdown-it-highlightjs-external：
--- ------- --------------------------------
使用
使用 markdown-it-highlightjs-external 很简单，我们只需要在代码中引入两个包，然后在 markdown-it 的解析器中添加一个插件即可。
-- -----
----- ---------- - ----------------------
----- ----------- - -----------------------
-- --- ----------- ---
----- -- - ------------
-- ----
----- ---- - -------------------------------------------
-- ----
------------ -
------------ ------------
----- ----
--
-- -- -------- --- ----
----- ------ - ------------ ----- -------
-------------------以上代码将会输出：
--------- ----------
现在，我们已经成功地在 Markdown 中使用了 highlight.js 代码高亮。
深入分析
让我们深入了解一下 markdown-it-highlightjs-external 的实现过程。我们将一步一步地分析代码来理解这个过程。
引入包
首先，我们需要引入 markdown-it 和 highlight.js 两个包。这两个包都是必须的，因为 markdown-it 提供了 Markdown 的解析器，而 highlight.js 则用来实现代码的高亮。
----- ---------- - ---------------------- ----- ----------- - -----------------------
初始化 markdown-it 实例
接着，我们需要初始化 markdown-it 解析器的实例。
----- -- - ------------
这一步非常简单，我们只需要直接调用 markdownIt 函数就可以了。
引入插件
现在，我们需要引入 markdown-it-highlightjs-external 插件。
----- ---- - -------------------------------------------
使用插件
让我们来看看如何使用这个插件。使用插件非常简单，我们只需要在 markdown-it 实例上调用 use 方法，并且将 markdown-it-highlightjs-external 的实例以及一些选项作为参数传入。
------------ -
------------ ------------
----- ----
--示例代码
最后，让我们来看一看完整的代码示例。这个示例展示了如何将 Markdown 转化成 HTML 并使用 highlight.js 实现代码高亮。
-- -----
----- ---------- - ----------------------
----- ----------- - -----------------------
-- --- ----------- ---
----- -- - ------------
-- ----
----- ---- - -------------------------------------------
-- ----
------------ -
------------ ------------
----- ----
--
-- -- -------- --- ----
----- ------ - ------------ ----- -------
-------------------结论
在本文中，我们探索了如何使用 markdown-it-highlightjs-external npm 包来实现代码高亮。这个包让我们能够方便地将 Markdown 转化成 HTML，并且使用 highlight.js 实现代码高亮。希望这篇文章能够帮助你更好地使用这个 npm 包来开发你的前端项目。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f0bbdce403f2923b035c109