hexo-volantis主题修改代码高亮风格

写代码的猫叔

发布于：Aug 7, 2021

前言

猫叔的博客是基于hexo制作的，选用主题为volantis，纵然这套主题我是特别喜欢，但它的代码高亮做的不是特别适合我，不如next主题里面的代码高亮风格那么好看（主要是暗色风格），但next主题我又不是特别喜欢，于是研究了下他的修改方法，终于找到一篇改造博客，但里面多少有点错误并且步骤不完整，于是做一些补充。

步骤

1.highlightjs不支持显示行号，改造使其支持

1).修改ejs文件

修改路径：themes/volantis/layout/_third-party/highlistjs/script.ejs

改造核心如下图，就是引入了highlightjs-line-numbers.min.js：

改造后代码：

<% if (theme.plugins.highlightjs.js) { %>
<%- js(theme.plugins.highlightjs.js) %>
<script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>hljs.initLineNumbersOnLoad({ singleLine: true });</script>
<% } %>
<script>
volantis.pjax.push(()=>{
    document.querySelectorAll('pre code').forEach((block) => {
      hljs.highlightBlock(block);
      hljs.lineNumbersBlock(block, { singleLine: true });
    });
},"highlightjs")
</script>

注意，这时候可能控制台会报如下提示，只需把hljs.initHighlightingOnLoad()改为hljs.highlightAll()即可

Deprecated as of 10.6.0. initHighlightingOnLoad() is deprecated.  Use highlightAll() instead.

2).创建行号的样式文件.styl

路径：themes/volantis/source/css/ 目录下新建 _other 文件夹，然后在里面新建 codeblock.styl 文件，路径如下图：

css样式代码如下：

/* for block of numbers */
.hljs-ln-numbers {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 
  text-align: center;
  color: #666;
  border-right: 1px solid #666;
  vertical-align: top;
  padding-right: 5px !important;
 
  /* your custom style here */
}
 
/* for block of code */
.hljs-ln-code {
  padding-left: 10px !important;
}

3.)引入styl文件

修改路径：source/css/style.styl，添加以下内容：

@import '_other/*'

2.禁用hexo默认的高亮设置

打开hexo的根目录下的主配置文件_config.yml，highlight设为false

highlight:
  enable: false

3.修改volantis的高亮设置

修改路径：_config.volantis.yml或者volantis主题下的_config.yml文件，搜索 highlightjs 关键字，找到高亮配置（如果没有的话，则添加即可），把他开启，并设置新的css样式

1.找合适的css样式表

去官网找 https://highlightjs.org/static/demo/
点击左侧theme查看效果，最终挑选好喜欢的样式
这里我找的是Night Owl这款，于是拼接样式地址https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10/build/styles/night-owl.min.css，重点就是结尾的文件名night-owl，规则就是驼峰写法的转换。

2.修改配置

enable改为true，修改css引用

plugins:
  highlightjs:
    enable: true
    js: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js
    css: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10/build/styles/night-owl.min.css