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

Question

更新了正确的 link 示例

我正在使用与 CSS 捆绑在一起的 Hugo 主题，并使用 Highlight.JS 进行语法高亮显示。我创建的网页在代码块 see here for example of my site page

中显示基于普通 "courier" 的固定宽度字体

我想使用另一种字体，例如 sans-mono 或更整洁的字体，就像 Highlight.JS 网页上显示的那样 here

我对 Javascript 和 CSS 不是很熟悉，只是尝试使用它们。有没有更简单的方法告诉 Highlight.JS 使用特定字体？假设我有可用的字体文件。

谢谢泽凯

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，最简单的方法是将其放在 HTML 模板中，并用 <style></style> 标签包围。虽然最好将它放在 CSS 文件中并用 <link rel="stylesheet" href="myStyles.css">.

引用它

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

How to use specific font with highlight.js

javascript

css

highlight.js

hugo