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

Question

更新了示例的正确链接

我正在使用与CSS捆绑在一起的Hugo主题，并使用Highlight.JS进行语法突出显示。 我创建的网页在代码块中显示了一个简单的“快递”固定宽度字体， 请参阅我的网站页面示例

我想用另一种字体，如SANS单声道或更多的东西整齐好看，就像它显示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">引用它。