博客必备技巧：用 highlight.js 轻松打造专业代码高亮效果

引言：为什么你的博客需要代码高亮？

想象一下，浏览一个博客或网页，看到一大块单调的代码 —— 这不仅让人眼花缭乱，还很难理解。就像下图这样：

这就是代码高亮发挥作用的地方。它就像给代码穿上彩衣，让每个函数、变量和关键字都一目了然。而当我们谈论代码高亮时，不能不提 highlight.js —— 一个简单、高效的工具，能让你的代码既好看又易懂。

highlight.js 简介

highlight.js 是一个广泛使用的开源代码高亮库，它提供了一种简单而有效的方式来美化网页上的代码片段。它支持超过180种编程语言和80种不同的样式，允许开发者和内容创作者在呈现代码时有广泛的选择。

功能和优势

• 自动语言检测：highlight.js 能够自动识别并高亮多种编程语言，省去了手动指定语言的麻烦。
• 丰富的主题库：它提供了各种预设样式，可以轻松适应不同的网站设计和个人喜好。
• 易于集成：作为一个纯JavaScript库，它可以轻松地嵌入几乎任何网页，无需复杂的依赖或配置。
• 高度定制性：开发者可以根据自己的需求定制代码高亮的样式，使其与博客的整体风格保持一致。

与其他代码高亮库相比，highlight.js 以其轻量级和易于使用的特性而著称。它不需要依赖任何框架，可以与任何现代浏览器兼容，使其成为许多博客和网站的首选代码高亮工具。

安装 highlight.js

安装 highlight.js 惊人地简单。首先，访问 highlight.js官网 下载最新版本。你可以选择直接下载源代码或使用CDN链接。

通过CDN引入

这是最简单的方法。只需在你的HTML文件中添加以下标签：

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

本地安装

如果你更喜欢本地安装，可以通过NPM或直接下载源文件：

npm install highlight.js

然后，在你的HTML文件中引入：

<script src="path/to/highlight.pack.js"></script>

记得还要添加你选择的样式表。highlight.js 提供了多种样式，可以从官网下载。

在个人博客中配置 highlight.js

配置 highlight.js 也很直观。在你的HTML文件中，确保你已经引入了highlight.js库和一个样式表。然后，你需要告诉highlight.js何时开始工作。在文档加载完成后，用以下JavaScript代码激活它：

document.addEventListener('DOMContentLoaded', () => {
  hljs.highlightAll();
});

这段代码会找到所有<pre><code></code></pre>标签内的内容，并应用代码高亮。确保你的代码片段被这些标签正确包围。

为特定语言定制

如果你想对特定的编程语言进行优化，可以在引入highlight.js的基础上，额外引入特定语言的模块：

<script src="path/to/highlightjs/languages/python.min.js"></script>

定制化 highlight.js 的外观

一旦你在博客中嵌入了 highlight.js，下一步就是使代码高亮风格符合你的个人品味。highlight.js 提供了多种预设主题，你可以在其官网上预览并选择。

更换主题

更换主题很简单。只需更改你在HTML中引用的CSS文件。例如，如果你想使用“夜间”主题，你的链接应该是这样的：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/night-owl.min.css">

该博客网站使用的就是Github Dark这个主题
https://www.capalot.cn/wp-content/themes/xianfu/assets/css/highlight/github-dark.min.css?ver=11.9.0

a11y-dark主题:

agate主题:

自定义样式

如果你想进一步定制样式，可以下载CSS文件并对其进行编辑，调整颜色、字体大小等属性，以匹配你的网站设计。

highlight.js 的高级应用

除了基本的高亮和样式定制，highlight.js 还提供了一些高级功能，可以让你的代码显示更加出色。

代码行号

许多博客作者喜欢在代码块中显示行号。虽然 highlight.js 本身不提供这个功能，但你可以通过简单的JavaScript和CSS来实现。你可以在网上找到多种实现方法，或使用像是 highlightjs-line-numbers.js 这样的插件。

自定义语言支持

如果你使用的是一种不太常见的编程语言，highlight.js 允许你添加自定义语言定义。你可以在其GitHub仓库中找到如何创建自定义语言模块的指南。

总结：提升你博客的代码展示

通过本文的介绍，我们了解到 highlight.js 是一个强大而灵活的工具，可以大幅提升你博客中代码的可读性和吸引力。无论你是技术博客的作者，还是希望在个人项目中展示一些代码片段，highlight.js 都是一个不可或缺的工具。其简单的安装和配置过程，以及丰富的定制选项，使它成为提升博客专业性和美观性的理想选择。

记得，代码高亮不仅仅是为了美观。它还可以帮助读者更好地理解和吸收技术内容，从而提升整体的用户体验。所以，不妨尝试在你的博客中引入 highlight.js，看看它如何改变你的代码展示。

相关资源

想要深入了解 highlight.js，以下资源将会非常有用：

• highlight.js 官方网站：了解最新版本，查看支持的语言和样式。
• highlight.js GitHub 仓库：访问源代码，参与社区讨论。
• highlight.js 官方文档：详尽的安装和配置指南。
• 在线代码高亮测试：尝试不同的代码样式和语言。