如何使用 highlight.js 来美化你的博客网页

写前说明

高亮代码是在编写技术文章时经常需要用到的功能，它能够使代码更加易读，也能够突出代码的重点。而 highlight.js 是一个广泛使用的代码高亮库，它支持超过 185 种编程语言和文本格式，并且可以很方便地与各种网页和应用程序集成。在本篇博客中，我将介绍如何使用 highlight.js 来实现代码高亮的效果。

步骤 1：下载 highlight.js

首先，需要从 highlight.js 的官方网站（https://highlightjs.org/）下载最新版本的 highlight.js 库。下载完成后，将 highlight.js 的文件夹复制到您的网站项目中，也可通过cdn的方式引入。

步骤 2：引入 highlight.js

将 highlight.js 的文件夹中的文件引入到您的网站中。可以通过以下代码将 highlight.js 引入到您的 HTML 文件中：

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>

本地方式引入

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

cdn的方式引入

这些文件包括：

default.css：highlight.js 的默认 CSS 样式表，提供了一套漂亮的样式，可以直接使用或根据需要修改。

highlight.pack.js：highlight.js 的核心 JavaScript 文件，用于处理和高亮代码。

步骤 3：使用 highlight.js

一旦成功引入 highlight.js，就可以使用它来高亮代码了。在需要高亮的代码块上添加 class="hljs" 属性即可。例如：

<pre><code class="hljs javascript">
// JavaScript 代码
</code></pre>

不过请注意，安装成功以后，highlight.js会自动给代码块加上hljs属性，这一步可以省略

步骤 4：自定义样式

highlight.js 的默认样式已经足够漂亮，但是如果您需要根据自己的需要进行定制，则可以自定义样式。可以在 default.css 文件中覆盖 highlight.js 的默认样式，或者在引入样式的时候引入你自己想要的样式。

官方提供了多种样式供选择，参见 https://highlightjs.org/static/demo/ 

展示效果

最后，我来展示一下 highlight.js 的效果。以下是一段 JavaScript 代码，使用 highlight.js 高亮后的效果：

function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {

我使用的是GitHub Dark效果，你可以去官方网站上去自行选择你喜欢的效果。