在前端开发中，经常需要展示代码。为了让代码更易读并提高阅读体验，我们通常需要对代码进行高亮处理。本文将介绍如何使用 npm 包 remark-highlight.js 来实现 Markdown 中的代码高亮。
什么是 remark-highlight.js？
remark-highlight.js 是一个基于 unified.js 的 Markdown 工具，用于在 Markdown 中渲染代码高亮。它基于 highlight.js 实现，支持超过 185 种语言和 89 种风格的代码高亮。
安装
首先，我们需要在项目中安装 remark-highlight.js，可以使用以下命令：
npm install remark-cli remark-parse remark-stringify remark-highlight.js
上述命令会同时安装 remark-cli、remark-parse、remark-stringify 和 remark-highlight.js 四个 npm 包。
使用
安装完成后，我们就可以在 Markdown 中使用 remark-highlight.js 了。以下是一段示例代码：
```javascript
function add(a, b) {
return a + b;
}-- -------------------- ---- ------- -------- ------------------ ------------------------------ ---------------------- ------------- ----- ------- - ------------------- ----- -------- - ------------------------ ----- --------- - ------------------------------- ----- --------- - ---------------------------- ----- --------- - --------- -------------- --------------- ---------------- ----- ----- - ------------------------ ------ -- --- ------ - - ------------ -----------------------------------------------------
上述代码中，我们首先引入了 unified、remark-parse、remark-highlight.js 和 remark-stringify 四个 npm 包，并创建了一个 processor 实例。然后，我们将 Markdown 文本传递给 processSync 方法进行处理，并输出处理结果。
运行上述代码，我们会得到类似以下的输出：
<pre><code class="hljs language-javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">add</span><span class="hljs-params">(</span><span class="hljs-params">a, b</span><span class="hljs-params">)</span> </span>{
<span class="hljs-keyword">return</span> a + b;
}
</code></pre>自定义主题
默认情况下，remark-highlight.js 使用的是 github 风格的主题。如果你想使用其他风格的主题，可以通过以下方式进行配置：
-- -------------------- ---- -------
----- --------- - -------------------------------
----- ------------- - ---------------------------
----- ------- - -
------- ------
-------------- -----
-------- ---------- -- -
---------------------------------- ------- ------ ---------- --- --------------
------ ---
--
-------- ---
----------- ------
------ ----------------
------------ ------ ----- -- -
-- ----- -- ----------------------- -
--- -
------ -------------------- - --------- ---- ---------
- ----- ---- --
-
------ ---
--
--
----- --------- - ---------
--------------
--------------- --------
----------------在上述代码中，我们通过传递一个 options 对象来进行配置。其中，theme 属性用于指定主题名称，highlighter 属性用于自定义代码高亮的实现方式。
除了使用内置主题外，你还可以从 highlight.js 官网 中下载更多主题。
结语
remark-highlight.js 是一个非常方便的 Markdown 工具，可以帮助我们轻松地实现代码高亮
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/41744