volantis - 更改行间代码行数及字体

0 前言#

Hexo 主题 volantis 集成了两种行间代码框高亮模板：highlightjs 与 prismjs。可以在 .yml 配置文件中方便地使用它们。但在使用的时候会出现一些小问题，比如代码字体与正文字体相同和不支持显示行号等，可以用接下来提到的方法进行优化。

不过因为我并不熟悉 css 和 JavaScript，本方法仍存在一些没有解决的问题，见最后一个章节，请慎用。

现在是 AI 时代了，我将如潮水般修复——等等，老文档还是就这样归档沉底吧。

1 修改步骤#

1.1 添加行号显示代码#

于位置 /themes/volantis/layout/_plugins/highlight/highlightjs/script.ejs 文件，对其作以下修改：

1
// 代码高亮部分的css样式
2
<% if (theme.plugins.highlightjs.css) { %>
3
  <script>volantis.css("<%- theme.plugins.highlightjs.css %>");</script>
4
<% } %>
5
// 代码高亮部分的js，在这里加入引入的代码行号的js文件
6
<% if (theme.plugins.highlightjs.js) { %>
7
  <%- js(theme.plugins.highlightjs.js) %>
8
  <script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
9
  <script>hljs.initHighlightingOnLoad();</script>
10
  <script>hljs.initLineNumbersOnLoad({ singleLine: true });</script>
11
  <% } %>
12
  <script>volantis.requestAnimationFrame(hljs.highlightAll)</script>
13
  <script>
14
  volantis.pjax.push(()=>{
15
      document.querySelectorAll('pre code').forEach((block) => {
16
        hljs.highlightBlock(block);
17
        hljs.lineNumbersBlock(block, { singleLine: true });
18
      });
19
  },"highlightjs")
20
  </script>
21
// 拷贝代码按键的部分
22
<% if(theme.plugins.highlightjs.copy_code){ %>
23
<script>
24
  function pjax_highlightjs_copyCode(){
25
    if (!(document.querySelector(".highlight .code pre") ||
26
      document.querySelector(".article pre code"))) {
27
      return;
28
    }
29
    VolantisApp.copyCode(".highlight .code pre, .article pre code")
30
  }
31
  volantis.requestAnimationFrame(pjax_highlightjs_copyCode)
32
  volantis.pjax.push(pjax_highlightjs_copyCode)
33
</script>
34
<% } %>

.ejs 本质上还是 JavaScript 模板，而原本的引用方法会在我的编辑器当中疯狂警告，因此沿用了参考教程的格式，补充了 css 和复制按钮部分。

1.2 创建样式文件#

路径 /themes/volantis/source/css/ 下创建一个自己的文件夹，如果之前看过官方文档中添加更多 noteblock 标签相关内容的话，这里面应该存在一个 _自定义名称 的文件夹，这里姑且命名为 _other 文件夹。

这个文件用于存放自己自定义的 styl 样式，方便整理。当然，要记得在后面的步骤中引入这个文件夹内的样式。

在其中建立名为 codeblock.styl 的样式文件。

1
/* for block of numbers */
2
.hljs-ln-numbers {
3
  -webkit-touch-callout: none;
4
  -webkit-user-select: none;
5
  -khtml-user-select: none;
6
  -moz-user-select: none;
7
  -ms-user-select: none;
8
  user-select: none;
9

10
  text-align: center;           /* 行号的对齐方式 */
11
  color: #f6f6f6;               /* 行号颜色 */
12
  border-right: 1px solid #CCC; /* 竖线的粗细、样式和颜色 */
13
  vertical-align: top;
14
  padding-right: 5px;
15
  font-family:  Menlo, Monaco;  /* 行号的字体，不设置即为正文字体 */
16
  background:                   /* 行号的背景颜色，为保持一致，请使用highlightjs的css的背景颜色 */
17
}
18

19
.hljs-ln-code {
20
  padding-left: 10px !important;
21
  font-family:  Menlo, Monaco;  /* 代码的字体，不设置即为code字体 */
22
  background:                   /* 同上一个background */
23
}

引入两个部分的样式，分别是行号部分和代码正文部分，可以对其进行样式和字体的修改。

调整暗黑模式下颜色不匹配问题#

使用 highlightjs 之后，volantis 的暗黑模式就不会再影响到代码框的背景颜色了。

而由于我也不知道什么原因的问题，暗黑模式之下的 highlightjs 会影响存在代码的代码行的背景色，造成背景色差异。而亮模式下却不存在颜色差异（可能是因为默认的 background 参数，不过 volantis 使用 highlightjs 之后的代码框在两个模式下都应该是同一个颜色的）。

::: grid{columns=“2” fit=“contain”} :::

因此，这里用了手动设置背景色 background 的方法规避掉背景色不同的问题。

这需要在选定好 css 模板之后，按照模板的颜色设置其背景颜色使其统一，是一种逃课的方法。

诶嘿。

1.3 引入样式文件#

在 /themes/volantis/source/css/style.styl 文件中补充引入有刚才写入 codeblock.styl 的文件夹 _other，引入形式如下：

1
@import '_other/'

到这里为止，额外增加行号和更改代码框字体的情况就完全完成了。重新进行网页渲染就可以看到更改的结果。

如果之前还没有使用过 highlightjs 来使代码高亮，那还需要做下后面的事情。

2 使用highlightjs#

首先要禁用 hexo 自带的代码高亮设置，在默认的 _config.yml 文件中：

1
highlight:
2
    enable: false

之后在主题的配置文件 _config.volantis.yml 文件中启用 highlightjs，并引入选择好的 CSS 样式：

1
  # highlight.js
2
  highlightjs:
3
    enable: true
4
    js: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js # 这一行调用高亮文件样式，可以换成可访问的 cdn
5
    css: https://cdn.jsdelivr.net/npm/highlight.js/styles/vs2015.css # 在这一行填写自己选择的样式链接
6
    # more: https://www.jsdelivr.com/package/npm/highlight.js?path=styles

3 目前存在问题（特性）#

该方法无法解决 folding 插件导致的 highlightjs 插件渲染代码不分行问题。
行号相对窗口并非固定位置，当一行代码过长时，移动窗口的滚动条，行号会随代码一同移动。
该方法只修改行间代码框字体，没有修改行内代码的字体。

To Create a World

0 前言#

1 修改步骤#

1.1 添加行号显示代码#

1.2 创建样式文件#

调整暗黑模式下颜色不匹配问题#

1.3 引入样式文件#

2 使用highlightjs#

3 目前存在问题（特性）#

分享文章