如何在 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 提供的默认样式覆盖了您自己的样式。有助于避免这种情况的方法是将<link>加载 CSS 文件的放在加载 highlight.js CSS 文件的后面。如果这不起作用，您将不得不使pre > code选择器更具体，例如将其更改为#main pre > code如果所有页面内容都包含在具有 ID 的元素中main。

如果您不确定如何添加 CSS，最简单的方法是将其放在由<style></style>标签包围的 HTML 模板中。虽然最好将它放在一个 CSS 文件中并使用<link rel="stylesheet" href="myStyles.css">.