Blogspot引入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'/>
效果会像这样:


评论

The Hot3 in Last 30 Days

ClouDNS .asia免费域名 托管到CloudFlare开CDN白嫖Websocket WS通道翻墙 / desec.io

无服务器 自建短链服务 Url-Shorten-Worker 完整的部署教程