highlight.js 怎么用

highlight.js 是一种轻量级、强大且易于使用的代码高亮显示库，它支持多种编程语言、自动语言检测、易于集成。 其中，自动语言检测特别有用，因为它可以根据代码的内容自动选择适当的语言进行高亮显示，无需手动指定。此外，highlight.js 还具有丰富的样式主题，可以根据需要轻松切换，从而使代码显示更加美观和专业。接下来，我们将详细介绍如何使用 highlight.js，包括如何安装、基本用法、配置选项以及一些高级应用。

一、安装和基础使用

安装 Highlight.js

在开始使用 highlight.js 之前，你需要先安装它。你可以通过以下几种方式安装：

通过 CDN 引入

这是最简单的方法，特别适合于小项目或临时使用。只需在你的 HTML 文件中添加以下代码：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>

通过 npm 安装

如果你使用的是 Node.js 项目，可以通过 npm 进行安装：
```
npm install highlight.js
```
安装完成后，可以在你的 JavaScript 文件中引入：
```
const hljs = require('highlight.js');
```

基本用法

在成功安装 highlight.js 之后，接下来我们来看一下如何使用它来高亮显示代码。

在 HTML 文件中使用

你需要在 HTML 文件中包含代码片段，然后调用 highlight.js 的初始化函数：

<pre><code class="language-javascript">
function helloWorld() {
    console.log("Hello, world!");
}
</code></pre>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightBlock(block);
    });
});
</script>

在 JavaScript 文件中使用

如果你更喜欢在 JavaScript 文件中进行操作，可以使用以下代码：

document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightBlock(block);
    });
});

二、配置选项和高级用法

选择语言

虽然 highlight.js 支持自动语言检测，但有时你可能希望手动指定语言。你可以通过在 <code> 标签中添加 class 属性来实现这一点：

<pre><code class="language-python">
def hello_world():
    print("Hello, world!")
</code></pre>

更改主题

highlight.js 提供了多种样式主题，你可以根据需要选择不同的主题。要更改主题，只需替换 CSS 文件的路径：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/monokai-sublime.min.css">

自定义初始化

如果你希望在初始化时进行更多的配置，可以使用 hljs.configure 方法。例如，设置是否忽略不支持的语言：

hljs.configure({ ignoreUnescapedHTML: true });

使用插件

highlight.js 还支持多种插件，例如行号插件。你可以通过 npm 安装并使用这些插件：

npm install highlightjs-line-numbers.js

然后在你的 JavaScript 文件中引入并初始化：

import hljs from 'highlight.js';
import 'highlightjs-line-numbers.js';
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();

三、在项目中的实际应用

在博客平台中使用

如果你正在开发一个博客平台，代码高亮显示是一个非常重要的功能。你可以在文章编辑器中集成 highlight.js，使用户在编写代码时能够实时看到高亮效果。

在文档系统中使用

对于 API 文档或技术文档系统，highlight.js 同样是一个非常实用的工具。通过高亮显示代码，可以使文档更加清晰易读，提升用户体验。

与项目管理系统集成

在项目管理系统中，代码高亮显示也能起到重要作用。例如，在研发项目管理系统PingCode和通用项目协作软件Worktile中，你可以集成 highlight.js，以便在任务描述或评论中展示高亮代码片段，从而提高团队沟通效率。

四、性能优化和注意事项

动态加载语言包

highlight.js 支持动态加载语言包，这对于提升性能非常有帮助。你可以根据实际需要只加载必要的语言包：

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import python from 'highlight.js/lib/languages/python';
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('python', python);

避免重复初始化

在复杂的单页面应用（SPA）中，可能会多次调用代码高亮初始化函数。为了避免性能问题，你可以在每次初始化前检查是否已经初始化过：

document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('pre code:not(.hljs)').forEach((block) => {
        hljs.highlightBlock(block);
    });
});

优化大文件的高亮显示

对于非常大的代码文件，高亮显示可能会导致性能问题。你可以通过分块高亮或懒加载的方式进行优化。

五、常见问题和解决方案

高亮显示不生效

如果你发现高亮显示不生效，首先检查是否正确引入了必要的 CSS 和 JavaScript 文件。其次，确保代码块的 class 属性设置正确。如果问题仍未解决，可以尝试手动调用 hljs.highlightBlock 方法。

自动检测语言不准确

虽然 highlight.js 的自动语言检测功能非常强大，但在某些情况下可能会不准确。你可以通过手动指定语言来解决这个问题。

与其他库的兼容性问题

在某些情况下，highlight.js 可能与其他 JavaScript 库产生兼容性问题。你可以通过检查控制台错误日志，并根据错误信息进行排查和修复。

六、总结

highlight.js 是一个功能强大且易于使用的代码高亮显示库，适用于各种场景。从简单的静态页面到复杂的单页面应用，再到各种项目管理系统，它都能提供出色的代码高亮效果。通过本文的介绍，你应该已经掌握了 highlight.js 的基本用法、配置选项以及一些高级应用技巧，希望这些内容能帮助你在实际项目中更好地使用 highlight.js，提高代码的可读性和用户体验。