npm 包 highlighter.js 使用教程

在前端开发中，高亮显示代码是一个经常需要用到的功能。有时候，我们需要在代码文本中标记一些特殊的语言元素，或者是实现代码的语法高亮。这时候，我们可以使用 highlighter.js 这个 npm 包。它是一个轻量级的库，提供了丰富的语法高亮和文本标记的功能。

安装和使用

要使用 highlighter.js，我们可以使用 npm 进行安装：

npm install highlighter.js --save

在我们的项目中，我们需要引入 highlighter.js 的 CSS 样式和 JS 文件：

<link rel="stylesheet" href="node_modules/highlighter.js/styles/default.css">
<script src="node_modules/highlighter.js/highlighter.js"></script>

当我们引入了样式和 JS 文件后，我们就可以使用 highlighter.js 了。比如，我们想要高亮显示一个代码块，我们可以通过以下代码实现：

import hljs from 'highlighter.js';

hljs.highlightBlock(document.querySelector('pre'));

在这里，我们先引入了 hljs 对象（highlighter.js 提供的默认对象），然后使用 highlightBlock() 方法对 pre 元素中的代码块进行高亮。我们可以在括号中传入我们想要高亮的代码块的 DOM 元素。

语法高亮和标记文本

highlighter.js 不仅可以进行代码的语法高亮，还可以标记特定的文本。我们可以使用 hljs 对象提供的各种方法实现这些功能。

语法高亮

highlighter.js 提供了很多种语言的语法高亮，并且支持自定义语法。常用的语法高亮方法有：

• hljs.highlightBlock(element)：高亮指定元素中的代码块；
• hljs.highlight(language, code)：对指定语言的代码进行高亮；
• hljs.registerLanguage(language, languageFunction)：注册一种新的语言。

比如，我们可以这样来高亮一个 HTML 代码块：

<pre><code class="html">...</code></pre>
<script>
  hljs.highlightBlock(document.querySelector('pre code'));
</script>

在代码标签中，我们设置了 class="html"，表示这是一段 HTML 代码。然后，在 JS 中，我们使用 highlightBlock() 方法对这段代码进行高亮。

标记文本

如果我们想要标记一段特定的文本，我们可以使用 highlighter.js 提供的 mark() 方法。比如，如果我们想要对某个词语进行标记，我们可以这样来实现：

import hljs from 'highlighter.js';

// 对代码中的 'highlighter.js' 进行标记
hljs.mark(document.querySelector('pre code'), 'highlighter.js');

在这里，我们使用 mark() 方法对 pre 元素中的代码块进行标记。我们可以在括号中传入我们想要标记的词语，也可以传入一个对象，来设置标记的渲染样式：

hljs.mark(document.querySelector('pre code'), {
  className: 'mark',
  accuracy: 'exactly',
  element: 'span'
});

在这里，我们使用 mark() 方法对 pre 元素中的代码块进行标记。我们传入一个对象来设置标记的样式。其中，className 表示要添加的 CSS 样式名，accuracy 表示精确匹配方式，element 表示标记的 HTML 元素。

多语言支持

highlighter.js 支持多种语言的语法高亮。比如，我们想要高亮一段 JavaScript 代码，我们可以这样做：

<pre><code class="javascript">...</code></pre>
<script>
  hljs.highlightBlock(document.querySelector('pre code'));
</script>

在代码标签中，我们设置了 class="javascript"，表示这是一段 JavaScript 代码。然后，在 JS 中，我们使用 highlightBlock() 方法对这段代码进行高亮。

结束语

通过这个教程，我们介绍了如何使用 highlighter.js 对代码进行高亮和文本进行标记。highlighter.js 是一个非常灵活的库，支持多种语言和自定义语言，可以帮助开发者更好地显示和呈现代码。希望能够帮助大家更好地实现代码高亮和文本标记的功能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37123