如何在highlight.js中使用特定字体

Question

使用指向示例的正确链接进行更新

我使用的是与CSS捆绑在一起的Hugo主题，并使用Highlight.JS进行语法突出显示。我创建的网页在代码块参见这里，例如我的网站页面。中显示了基于普通“信使”的固定宽度字体。

我想使用另一种字体，比如sans-mono或其他更整洁的字体，就像它在Highlight.JS网页这里上显示的那样。

我不太熟悉Javascript和CSS，只是试着使用它们。是否有更简单的方法让Highlight.JS使用特定的字体？假设我有可用的字体文件。

谢谢ZeeKay

Answer 1

将此添加到CSS中：

pre > code {
    font-family: "Sans Mono", "Consolas", "Courier", monospace;
}

这将使用该列表中在用户系统上可用的第一个字体。有时字体与它们的实名有不同的间距，因此，例如，如果"Sans Mono"不能工作，请尝试"SansMono"。确保将monospace放在最后，以便在用户没有任何列出的字体的情况下，至少选择一些合适的字体。

如果这不起作用，可能是由于选择器的特殊性问题，其中highlight.js提供的默认样式正在覆盖您自己的样式。有助于避免这种情况的是将加载CSS文件的<link>放在加载highlight.js CSS文件的后面。如果这不起作用，则必须使pre > code选择器更加具体，例如，如果所有页面内容都包装在一个ID为main的元素中，则将其更改为#main pre > code。

如果您不知道如何添加CSS，最简单的方法是将其放入<style></style>标记包围的HTML模板中。不过，最好把它放在一个CSS文件中，然后用<link rel="stylesheet" href="myStyles.css">引用它。