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

查看相关主题:
除了 google 的 code-prettify, 其实我也尝试过 Prism 和 highlight.js

Prism

用法

在blogspot的模板里添加

模板里加Prism的css和js

<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 以及指定代码类型

写博客时切HTML模式手动写pre code


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

blockquote换成pre code后的效果


highlight.js

用法

模板里加highlight.js的css和初始化
<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

highlight.js自动识别，bash认成Ruby


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

对JS代码的判断还正常.

检查元素看code.hljs的样式



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

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

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

教程里要显示命令行操作日志

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

换成pre code后显示效果就是这样



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

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

我特意给代码里部分文字设了颜色


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

用了代码高亮颜色就被覆盖成规范色


综上所述 我还是继续用 blockquote


========
完
评论
发表评论