修改 Hexo 博客 code 字体及代码高亮

最近十分中意一套字体 Source Code Pro,在其他各种地方都用上了,于是也来捣鼓一下怎么把博客文章里的代码字体也改成这套。顺便也打算把代码高亮改改,原本的那个实在显得太阴间。

0x00 修改字体

因为 CTF-Wiki 上的代码用的就是这套字体,所以我直接嫖过来了。

image-20200720103945503

把上面这个文件的内容复制下来,粘贴到博客主题里有关 markdown 样式的 css 文件里。再把文件里该修改的部分改一改。

image-20200720104206731

image-20200720104354435

上传部署之后就能看到效果了,可以看到代码字体已经被更换为 Source Code Pro

image-20200720104718968

0x01 修改代码高亮效果

CTF-Wiki 上有关代码高亮的 js 文件太复杂了,似乎不能只扒一个文件就到达目的。了解到一个叫 highlightjs 的网站,上面有能够打包下载的有关代码高亮的 css 和 js 文件,先把它们下载下来。

image-20200720105457655

image-20200720105424697

把上图中标示出来的两个文件分别拷贝到博客主题的 css 和 js 文件夹中,再在博客主题的配置文件 _config.yml 中将这两个文件设置为使用的 css 和代码高亮 js。

image-20200720105839239

最后上传部署到服务器即可看到新的代码高亮效果。

image-20200720111750702

0x03 参考资料

2019-2020 @lukbash