前言
在前端开发中，代码高亮展示是很常见的需求，使用第三方库可以方便地实现。本文介绍一款 npm 包 tmp-highlighter，该包提供了一个简单易用的代码高亮工具。本文将对该库的使用教程进行详细介绍。
tmp-highlighter 简介
tmp-highlighter 是一个轻量的语法高亮工具，支持多种语言语法的高亮。该包没有任何依赖，并且使用方便。你只需要将代码字符串和语言信息传递给 tmp-highlighter，即可在页面上展示高亮后的代码。
安装
你可以将 tmp-highlighter 作为 npm 包直接安装：
npm install tmp-highlighter --save
或者在 HTML 中使用 script 标签引入：
<script src="https://unpkg.com/tmp-highlighter@1.0.0/dist/tmp-highlighter.min.js"></script>
如果选择在 HTML 中使用 script 标签引入，则需要在引入 tmp-highlighter.js 文件后，访问全局变量 tmpHighlighter。
使用
在项目中使用 tmp-highlighter 非常简单，下面是一个基本的使用示例：
-- -------------------- ---- -------
------ -------------- ---- ------------------
----- ---- - -
-------- ------------ -
-- -- -- -- -
------ --
- ---- -
------ ----------- - -- - ----------- - ---
-
-
--
----- ------- - -
--------- -----
----------- ----
--
----- ----------- - ------------------------------ ---------以上代码先使用 import 引入 tmp-highlighter 包。然后，定义一个 code 变量，包含需要高亮的代码字符串。接着，定义一个 options 变量，构建需要传递给 tmpHighlighter 的选项，包括语言和是否显示行号等。最后，调用 highlight 方法，传递代码字符串和选项参数，得到高亮后的代码字符串。
如果你选择在 HTML 中使用 tmp-highlighter，可以像下面这样使用：
-- -------------------- ---- -------
----- ---- - -
-------- ------------ -
-- -- -- -- -
------ --
- ---- -
------ ----------- - -- - ----------- - ---
-
-
--
----- ------- - -
--------- -----
----------- ----
--
----- ----------- - ------------------------------ ---------
----- --------- - -------------------------------------
------------------- - ------------在 HTML 中，我们先定义一个容器，然后将高亮后的代码字符串设置为该容器的 innerHTML 值。
选项参数
highlight 方法接受一个选项参数，下面是该参数的默认值：
const options = {
language: 'plain',
lineNumber: false
};目前，tmp-highlighter 支持的语言包括：html, css, js, ts, jsx, tsx, json, sql, md, yaml 等。你可以通过将 language 参数设置为其中一个值，来指定要高亮的代码语言。该库支持自定义语言高亮规则，如果是您未支持的语言，您可以通过 tmphl.addLanguage(language, rules) 方法，添加代码高亮规则。
lineNumber 参数用于控制是否显示行号，缺省情况下不显示。
总结
tmp-highlighter 是一个非常简单易用的代码语法高亮工具库。有了它，我们可以方便地实现页面上的代码高亮效果。通过本文，我们了解了该库的使用方法和 options 可选项。希望本文能够帮助你更好地使用和理解 tmp-highlighter。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560d881e8991b448df1bc