前言
今天重新配置了一下博客主题,主要是代码高亮,并且修改背景色使用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 目录下,解压完下过如下:
移除 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
然后清除浏览器缓存即可查看效果。