前言

今天重新配置了一下博客主题，主要是代码高亮，并且修改背景色使用Dark背景。高亮方案使用的是Highlightjs，引入比较简单。一开始打算引用Prettify遇到一些问题，后来发现更好的解决方案 Highlightjs 。

准备工作

下载 Highlightjs: https://highlightjs.org/download

安装步骤

关闭 Hexo 默认高亮方案

修改 Hexo 根目录下的 _config.yml 配置文件:

highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace:

解压 Highlightjs

修改 Hexo 根目录下新建 plugins 目录，并将 准备工作 下载的 Highlightjs 的压缩包解压到 plugins 目录下，解压完下过如下：

Highlightjs
Highlightjs

移除 Hexo 默认高亮样式

修改 hexo-theme-indigo 主题的样式文件: themes/indigo/source/css/style.less，注释掉下面这行(400)：

// @import '_partial/highlight';

引入 Highlightjs CSS 样式

修改 hexo-theme-indigo 主题的样式文件: themes/indigo/layout/_partial/head.ejs， 在 内最下面添加以下内容：

  <!-- highlight.js代码高亮主题 css 引入-->
  <link rel="stylesheet" href="/plugins/highlight/styles/dracula.css">
  <!-- highlight.js代码高亮主题 css 引入-->

我这里引入的是 Dracula 方案，具体可根据自己喜好选择自定义方案。

Highlight样式预览地址：https://highlightjs.org/static/demo/

引入 Highlightjs script 脚本

修改 hexo-theme-indigo 主题的脚本文件: themes/indigo/layout/_partial/script.ejs， 在文件末尾添加以下内容：

  <!-- highlight.js代码高亮主题 script 引入-->
  <script src="/plugins/highlight/highlight.pack.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  <!-- highlight.js代码高亮主题 script 引入-->

本地预览代码高亮

hexo clean && hexo g && hexo server

执行以上命令，打开 http://localhost:4000 预览结果。

修改代码背景色

由于 hexo-theme-indigo 主题默认的代码背景色是浅色，所以即使选择深色的 Highlightjs 方案，也没法看到想要的 Dark 背景。
默认的代码背景色定义在 themes/indigo/source/css/_partial/variable.less 文件中：

  @codeBg: #f5f5f5;

然后在 themes/indigo/source/css/_partial/article.less 中使用：

  code,
  pre {
      background: @codeBg
  }

为了不改变其他地方对 codeBg 的使用，最好不要直接修改其值，这里我重新定义了一个变量用来设置代码背景色，在 **@codeBg: #f5f5f5;**定义的下一行添加：

  @codeHighBg: #263238;

然后在 themes/indigo/source/css/_partial/article.less 中修改为：

  code,
  pre {
      background: @codeHighBg
  }

本地预览代码 Dark 背景

hexo clean && hexo g && hexo server

重新执行以上命令，打开 http://localhost:4000 预览结果。

推送到服务器

hexo clean && hexo g && hexo d

执行以上命令，将修改后的效果应用到服务端。
这时如果使用了 CDN ，可能看不到服务器上修改后的效果。

修改 hexo-theme-indigo 主题的配置文件: themes/indigo/layout/_partial/head.ejs，添加以下内容：

  # cdn
  cdn:
    enable: false

这时重新执行：

hexo clean && hexo g && hexo d

然后清除浏览器缓存即可查看效果。