Blogspot最适合我的 还是不用代码高亮 / code-prettify / Prism / highlight.js

除了 google 的 code-prettify, 其实我也尝试过 Prism 和 highlight.js

Prism

用法

在blogspot的模板里添加

<link href='https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css' rel='stylesheet'/>
<script src='https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js'/>
<script src='https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js'/>

效果

Prism没有自动识别代码的功能. 需要写blog时, 切换到html模式手动写 pre code 以及指定代码类型


可以有下面这样的效果. (当然, 配色方案能找到很多选择)


highlight.js

用法

<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>

效果

highlight.js可以自动识别代码类型, 不过也不怎么准, bash识别成 Ruby


如果想bash识别准确, 每行命令前面要打那个#号. 那这样又不方便直接复制之后在命令行里直接粘贴运行了.

对JS代码的判断还正常.



还有一个最大的问题, 我把blockquote替换为pre code之后, highlight.js总把它们显示为一行.

显示命令行操作日志的问题

除了上面两点以外, 我还有一个具体的问题.
我的教程会提供命令行操作日志记录, 用于读者对比自己的操作是否正确. 如,

而根据 pre code 特性, 这里面的空格和一些特殊字符会和其它HTML元素处理得不一样.
我如果把blockquote转换为了 pre code, 显示效果就是这样,



代码高亮会覆盖我特意设置的字体颜色

我还有一个场景不适合代码高亮.
我在引用代码的时候, 会结合教程的内容, 对部分代码有特意设置的字体颜色. 如,


如果我使用了代码高亮, 就会变成规范的颜色.


综上所述 我还是继续用 blockquote


========

评论

The Hot3 in Last 30 Days

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

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