今天搞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
的压缩,第三行就是初始化咯。