使用highlightjs-line-numbers后代码字体变为Arial的问题求助

核心原因 #

highlightjs-line-numbers插件会给代码块添加额外的line-numbers类和嵌套DOM结构，而你的主题原有代码字体样式未覆盖带该类的元素，导致代码块 fallback 到浏览器默认的无衬线字体（Arial是Windows平台默认sans-serif字体之一）。

具体排查步骤 #

1. 打开浏览器开发者工具（F12），选中代码块的<pre>或<code>元素，切换到Computed标签页，查看font-family属性的来源：
   • 如果显示的是Arial, sans-serif，说明没有匹配到主题的等宽字体样式规则。
   • 检查Styles标签页，确认主题的代码字体规则是否只针对不带line-numbers类的元素（比如原规则是pre.hljs { ... }，未包含pre.hljs.line-numbers）。

解决方法 #

方法1：扩展主题代码样式 #

在你的主题CSS文件（比如assets/css/main.css）中添加以下规则，强制给带行号的代码块应用等宽字体：

/* 替换为你主题原本使用的等宽字体 */
pre.hljs.line-numbers,
pre.hljs.line-numbers code,
.line-numbers .line-numbers-rows {
  font-family: "Consolas", "Monaco", "Courier New", monospace;
}

方法2：覆盖插件默认样式 #

部分版本的highlightjs-line-numbers插件会自带字体样式，需要用更高优先级的规则覆盖：

pre.line-numbers {
  font-family: 你的主题等宽字体 !important;
}

方法3：调整插件初始化配置 #

如果插件允许，初始化时禁用可能影响字体的默认样式（部分版本支持useStyle: false参数），在script.html中修改初始化代码：

hljs.initLineNumbersOnLoad({
  useStyle: false
});

内容的提问来源于stack exchange，提问作者wermos