下面我概述了我是如何设法为我的主题破解它的。FWI 我还处于学习阶段,所以我的方式可能不是最优化的解决方案。
在主题目录中,转到 /partials/head.html 或 header.html。添加以下 html 行,这将直接使用 CDN 资源,而无需下载自定义副本:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
根据您要使用的样式替换 default.min.css。我正在使用这种github
风格。或者,您可以从 highlight.js 网站下载自定义副本,解压缩 zip 文件夹并将您选择的 highlight.js 和 CSS 样式复制到您网站下的相关目录。
编辑:更简单的实现是使用 Yihui 的说明:将以下代码添加到foot_custom.html
/layouts/ 目录下。.
<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>
最后一个代码确保 highlight.js 不会自动猜测语言。您可以在您的config.toml
例如
手动设置highlightjsVersion = "9.12.0"
highlightjsCDN = "//cdn.bootcss.com"
highlightjsLang = ["r", "yaml", "tex", "python"]
highlightjsTheme = "github
在 head_custom 中,添加以下代码:
<link href="//cdn.bootcss.com/highlight.js/9.12.0/styles/github.min.css" rel="stylesheet">
对于代码块自定义,请使用 CSS。
此处的其他资源