更新了指向示例的正确链接

我正在使用与CSS捆绑在一起的Hugo主题,并使用Highlight.JS进行语法高亮显示.我创建的网页在代码块see here for example of my site page中显示基于普通“信使”的固定宽度字体

我想使用另一种字体,如sans-mono或更简洁的外观,如Highlight.JS网页here所示

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

谢谢
ZeeKay

解决方法:

将此添加到您的CSS：

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

这将使用用户系统上可用列表中的第一种字体.有时字体的间距与其真实名称的间距不同,例如,如果“ Sans Mono”不起作用,请尝试“ SansMono”.确保最后放置等宽字体,以便在用户没有列出的字体的情况下至少选择一些合适的字体.

如果此方法不起作用,则可能是由于选择器的特定性问题所致,其中highlight.js提供的默认样式会覆盖您自己的样式.可以避免这种情况的方法是将< link>会在加载Highlight.js CSS文件之后加载CSS文件.如果这不起作用,则必须先进行>更具体的代码选择器,例如将其更改为#main pre>如果所有页面内容都包装在ID为main的元素中,则代码.

如果您不确定如何添加CSS,最简单的方法是将其放在由< style>< / style>标签.尽管最好将其放在CSS文件中,并使用< link rel =“ stylesheet” href =“ myStyles.css”>进行引用.