在Hugo博客中加入代码高亮

原创

徐建国

修改于 2021-08-04 10:16:11

1.6K0

修改于 2021-08-04 10:16:11

文章被收录于专栏：个人路线个人路线

相信自己搭建博客的人中有一大半都是玩代码的，所以代码高亮可以说是博客的必备功能。本文提供一个在基于Hugo的博客上使用highlight.js的代码高亮方案。

实施步骤

在highlight.js的官方网站上复制HTML的link和script标签。例如：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>

打开themes/yourtheme/layouts/_default目录，打开baseof.html，（可能对不同主题文件和路径会有不同，如果找不到可以试试查找head.html或header.html。这个html文件是网页的head部分的模板。在合适的地方粘贴第一步中的代码。
大功告成。

使用

用```包裹代码块，保险起见，在```后加上语言名字。例如（不包括方括号内）：

[START HERE]
```c
int hash(char * str, int length) { // hash function
    int hash = 0;
    for (int i = 0; i < length; i++) {
        hash = ((hash + str[i]) * 31) % MAX_ID; // maximum of ID?
    }
    return hash;
}
```[END HERE]

显示效果如下：

int hash(char * str, int length) { // hash function
    int hash = 0;
    for (int i = 0; i < length; i++) {
        hash = ((hash + str[i]) * 31) % MAX_ID; // maximum of ID?
    }
    return hash;
}

注意事项

如果要使用的语言很生僻，链接内的js和css可能无法满足需求，可以添加新的script，比如：https://cdn.bootcss.com/highlight.js/9.12.0/languages/yaml.min.js。或者在highlight.js的官方网站上自定义并下载下来，用本地引用。
如果需要修改颜色、背景色等样式，可以把css下载下来，修改后本地引用。修改后的css放在themes/yourtheme/static/css里，用href="/css/highlight.css"引用。强烈建议在css里把背景色去除。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

云服务器