在Hugo博客中加入代码高亮
source link: https://blog.xpgreat.com/p/hugo_add_highlight/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
相信自己搭建博客的人中有一大半都是玩代码的，所以代码高亮可以说是博客的必备功能。本文提供一个在基于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里把背景色去除。
Recommend
-
17
Hugo中添加代码高亮支持 2017-06-24 21:50:29 +08 字数：1625 标签： Hugo Markd...
-
10
minted——实现latex的代码高亮 minted——实现latex的代码高亮 早上一直在编辑自己的简历，采用了肉山的简历模板（tex）。编辑的差不多时，想到了之前同样用latex写的数学建模论文，当时把全部代码统统贴...
-
8
如何在 Zotero 中高亮代码 This article is deprecated. There is a better way to highlight code, see the revised article
-
8
全文5000字，解读 vscode 背后的代码高亮实现原理，欢迎点赞关注转发。Vscode 的代码高亮、代码补齐、错误诊断、跳转定义等语言功能由两种扩展方案协同实现，包括：基于词法分析技术，识别分词 token 并应用高亮样...
-
7
如果我们需要在网页展示代码片段，该不会截图吧？当然不！这个时候我们可以使用一些插件实现这个效果，让用户在网页上看到的代码跟在开发编辑器上的效果一样，高亮显示。hig...
-
12
这里是Ozelot。一个正在学习编程，希望和各位大佬一起交流学习的大学生。我觉得，适合自己的代码配色，可以方便我们辨认代码中标识符的含义，方便我们阅读代码。这里我把我积累到的小小经验分享给大家，也欢迎大家补充和指出不足，我会学习并更新内容，...
-
8
markdown笔记：公式插入和代码高亮 发表于 2019-09-15 | 更新于: 2020-02-15 | 分类于 操作和使用 |
-
9
代码高亮插件Prism.js添加全屏预览功能2022年2月26日 by anzhihe·0评论 · 58 人阅读 · 隐藏...
-
12
给 Hugo 博客添加 mermaid 短代码支持 2021-06-05 :: 荒野無燈 :: Mod 2021-06-20(ee165f2) #mermaid #hugo #
-
9
typecho 使用prism.js代码高亮 于 2020-04-26 由 jinlife 发布 先去
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK