前端开发中，我们常常需要将代码高亮显示在网页上，便于阅读和理解。而 npm 包 rehype-highlight 就是一款帮助我们实现代码高亮的工具。本文将详细介绍如何安装和使用这个工具，以及如何调整其配置。
安装
首先，我们需要在项目中安装 rehype-highlight。可以使用 npm 进行安装：
npm install rehype-highlight
使用方法
安装完成后，我们就可以在项目中使用 rehype-highlight 了。
基础使用
rehype-highlight 可以处理标记语言（如 HTML、Markdown 等）中的代码块，并将其高亮显示。只需要使用它提供的 rehype-highlight 插件和相应语言的 highlight.js 库即可。
-- -------------------- ---- ------- ----- ------- - ------------------ ----- -------- - ----------------------- ----- ------------- - ------------------------ ----- --------- - --------------------------- ----- ---- - --------------------------- --------- -------------- ------------------- --------------- ---------- ---------------------------------- -------- - ------- -------------------------------------
上述代码将输出如下 HTML：
<pre class="hljs language-javascript"><code><span class="hljs-keyword">const</span> greeting <span class="hljs-operator">=</span> <span class="hljs-string">"Hello, World!"</span> console<span class="hljs-dot">.</span>log(greeting)</code></pre>
可以看到，代码块中的 JavaScript 代码被正确地高亮显示。
指定语言
rehype-highlight 默认使用 highlight.js 库，可以高亮大量编程语言和模板语言。例如，我们可以使用 rehype-highlight 高亮显示 Python 代码：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- -------- - ----------------------- ----- ------------- - ------------------------ ----- --------- - --------------------------- ----- ---- - --------------------------- --------- -------------- ------------------- --------------- - ---------- ---------- -- ---------- -------------------------------------- ---------------
输出结果：
<pre class="hljs language-python"><code><span class="hljs-built_in">print</span>(<span class="hljs-string">"Hello, World!"</span>)</code></pre>
更改主题
默认情况下，rehype-highlight 使用默认主题渲染高亮代码。但是，我们可以通过更改 highlight.js 中包含的 CSS 类来更改代码块的样式：
pre code.hljs {
background-color: #f4f4f4;
display: block;
font-size: 13px;
margin: 0;
overflow-x: auto;
padding: 16px;
}自定义配置
rehype-highlight 提供了许多自定义选项，可以根据需要进行更改。以下是常用选项及其默认值：
-- -------------------- ---- ------- - -------------- ------ -- ---------------- ------- -------- -- -------- ---------- --- -- ------- ------- ------ -- -------------- -------- --- -- ------- ---------- --- -- -------- ----- --- -- ----------- --------- --- -- -------------- --------- ----- -- ------- ------ ------ -- -------- ------ -- -
具体使用方法可参见 rehype-highlight 的官方文档：https://github.com/rehypejs/rehype-highlight。
总结
本文介绍了如何使用 rehype-highlight npm 包实现网页上的代码高亮，并提供了常用的选项和配置方法。使用这个工具，我们可以轻松地让代码块更加美观易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/58038