语法高亮字体颜色不会更改

时间:2017-12-08 16:58:05

标签: html css hugo

我使用雨果来生成网站。我在/themes/hyde/static/css中有一个语法高亮css(例如明天 - 夜 - 蓝色.css),在highlight.pack.js中有一个/themes/hyde/js,并且在header.html中有以下代码

  <!-- CSS -->
  <link rel="stylesheet" href="{{ .Site.BaseURL }}css/print.css" media="print">
  <link rel="stylesheet" href="{{ .Site.BaseURL }}css/poole.css">
  <link rel="stylesheet" href="{{ .Site.BaseURL }}css/syntax.css">
  <link rel="stylesheet" href="{{ .Site.BaseURL }}css/hyde.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="{{ .Site.BaseURL }}css/tomorrow-night-blue.css">
  <script src="{{ .Site.BaseURL }}js/highlight.pack.js"></script>
  <script>
  hljs.initHighlightingOnLoad();
  </script>

渲染网站上的代码夹头只有蓝色背景颜色,但文本没有突出显示,如下所示。 enter image description here

我认为语法高亮css与其他css冲突,但我不知道冲突在哪里以及如何解决它。

源文件托管here,如果这有助于调试。

1 个答案:

答案 0 :(得分:0)

做了一些搜索。无法为我的特定问题找到解决方案,但仍然设法突出显示此帖后面的代码。

https://github.com/yihui/hugo-xmin/pull/5/files

基本上,需要在header.html中加入类似的内容

<link href="//cdn.bootcss.com/highlight.js/9.12.0/styles/github.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script src="//cdn.bootcss.com/highlight.js/9.12.0/languages/r.min.js"></script>
<script>
hljs.configure({languages: []});
hljs.initHighlightingOnLoad();
</script>

我已经在header.html中添加了css和script的链接,而不是将它们分别放在hearder.html和footer.html中,如链接所示。无论哪种方式都可以。

我仍然愿意接受更具体的解决方案。