我使用雨果来生成网站。我在/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>
渲染网站上的代码夹头只有蓝色背景颜色,但文本没有突出显示,如下所示。
我认为语法高亮css与其他css冲突,但我不知道冲突在哪里以及如何解决它。
源文件托管here,如果这有助于调试。
答案 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中,如链接所示。无论哪种方式都可以。
我仍然愿意接受更具体的解决方案。