前言

今天重新配置了一下博客主题,主要是代码高亮,并且修改背景色使用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

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

参考文章

  1. 如何修改代码高亮配置
  2. variable.less修改后无效果
  3. 如何修改代码块的样式
  4. Hexo高亮

开源地址

xiaobailong24.me

联系

我是 xiaobailong24,您可以通过以下平台找到我: