Hugo 添加代码高亮

Posted by Eric Jin on 2020-05-02

今天搞blog 的时候发现代码的高亮格式异常的怪,看着非常的不舒服。按理来说Markdown 写出来的code 格式不应该是这样的。然后查了点资料,找到了有hugo 官方支持的高亮。
Syntax Highlighting

Hugo comes with really fast syntax highlighting from Chroma.

官方这这个t is built in Go and is really, really fast, 配置,教程啥的官方都有,也不是很复杂。这个是通过hugo 编译然后生成一个css文件。

hugo gen chromastyles --style=monokai > syntax.css

不过我想直接通过纯的Markdown 语法来书写blog的,而且为了让这些文章以后换静态网页生成工具还可以使用的话,这个方法便不是特别的好。跨平台使用还是很重要的。 所以我在网上找了两个javascript 的库(当然还有其他很多的库):

我发现我之前用的就是Prism, 然后样式变乱了,不知道出了什么问题。这次就换成Highlight.js吧。

操作方法

直接在header的partial里面添加下面的代码就可以了

    <link href="https://cdn.bootcss.com/highlight.js/10.0.1/styles/monokai.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/highlight.js/10.0.1/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>

现在Highlight.js用的是10.0.1版本。
第一行代码是配色方案,用的是monokai的,第二行代码就是highlight.js的压缩,第三行就是初始化咯。

引用