Blogger引入google的code-prettify实现代码高亮

最早的时候, 我是用CSS定义blockquote来实现某种意义上的显示代码.

这两天, 看到一个推荐google的code-prettify项目的博客 https://www.shushen.xyz/

就想到怎么把这个引入到 blogger 里面来.

原版的用法, 参考readme

1. 引入JS
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

2. 在代码段使用
<pre class="prettyprint">

就好了

思路

加载一个JS脚本, 把<blockquote>转换为<pre class="prettyprint">

参考GPT

最终结果

https://github.com/crazypeace/blogger-replace-blockquote-to-pre/blob/main/blockquote2pre.js

参考 以前的经验, 用Github Pages解决MIME type mismatch 

这样子去获取JS文件 

https://crazypeace.github.io/blogger-replace-blockquote-to-pre/blockquote2pre.js

部署

修改blogger的模板

添加两个JS文件的引用.

<script src='https://crazypeace.github.io/blogger-replace-blockquote-to-pre/blockquote2pre.js'/>

<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js'/>

======

完

======

后记

本以为大功告成. 

结果多检查了几篇博文, 发现如果一行代码太长, 会伸到边框外面.

要么应用水平滚动条, 要么自动换行. 考虑到代码的特性, 还是水平滚动条吧.

继续咨询了一下GPT. 

给<pre>添加一个CSS

overflow-x: auto;

写在blogger模板里面是这样的:

这下真的收工了.

======

update

code-prettify是自带几个skin的. 喜欢黑暗本色的, 可以这样使用.

<script src='https://crazypeace.github.io/blogger-replace-blockquote-to-pre/blockquote2pre.js'/>

<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=desert'/>

效果会像这样: