Hugo博客代码高亮

2019-08-01 约 905 字预计阅读 2 分钟

在写LaTeX的时候，感觉个人博客的代码高亮很有问题，在不该高亮的地方高亮，所以想解决一下这个问题。

方法一. 使用Hugo扩展包

其实关于代码高亮，如果是使用LeaveIt主题的话，在issue里面有人提出过，解决方案主要是使用Hugo的extented包中对Sass/SCSS的支持。

Step 1. 下载hugo extended

在网址https://github.com/gohugoio/hugo/releases/ 中下载对应操作系统的extended版本的压缩包，比如我下载的是hugo_extended_0.56.3_Windows-64bit.zip。

Step 2. 修改行内样式

使用LeaveIt主题的话，对代码高亮编辑的是scss文件，打开themes\LeaveIt\assets\css\_common\_page\post.scss。
如果想把行内代码的样式，修改为更为常见的浅红底红字，可以按照https://blog.hgtweb.com/2019/code-csdn/ 修改。

Step 3. 修改代码块样式

参照https://liuzhichao.com/2018/hugo-theme-leaveit/ 代码高亮说明，通过编辑themes\LeaveIt\assets\css\_common\_prettyprint\default.scss文件即可，我用这个文件改了一下代码块的背景。

关于配色可以参见我的另一篇文章——网站配色

方法二. 使用Highlight插件

直接使用下面的代码，复制粘贴到需要使用代码的地方即可。但是好像我使用这个主题的时候，是先使用这个渲染代码高亮，后使用LeaveIt主题自带的代码高亮，所以会覆盖掉，所以没有用这个方法。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<head>
<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/monokai.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>


<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/tex.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

</head>

测试代码

1
2
3
4
5
6


#include 
int main(void)
{
  printf("Hello world!"),
  return 0;
}

1
2
3
4
5


\documentclass{article}  
% 这里是导言区
\begin{document}
Hello, world!
\end{document}

1
2
3
4
5
6
7
8
9


import os

print('Process (%s) start...' % os.getpid())
# Only works on Unix/Linux/Mac:
pid = os.fork()
if pid == 0:
    print('I am child process (%s) and my parent is %s.' % (os.getpid(), os.getppid()))
else:
    print('I (%s) just created a child process (%s).' % (os.getpid(), pid))

1
2
3
4
5
6
7


如果代码块没有写明语言，样式会重复。
no class
\documentclass{article}  
% 这里是导言区
\begin{document}
Hello, world!
\end{document}

参考资料

制作了一款 Hugo 主题, LeaveIt https://liuzhichao.com/2018/hugo-theme-leaveit/
Hugo中添加代码高亮支持 https://note.qidong.name/2017/06/24/hugo-highlight/
修改LeaveIt中的行内code样式 https://blog.hgtweb.com/2019/code-csdn/

目录