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识别准确, 每行命令前面要打那个#号. 那这样又不方便直接复制之后在命令行里直接粘贴运行了.
如果想bash识别准确, 每行命令前面要打那个#号. 那这样又不方便直接复制之后在命令行里直接粘贴运行了.
对JS代码的判断还正常.
还有一个最大的问题, 我把blockquote替换为pre code之后, highlight.js总把它们显示为一行.
显示命令行操作日志的问题
除了上面两点以外, 我还有一个具体的问题.
我的教程会提供命令行操作日志记录, 用于读者对比自己的操作是否正确. 如,
我如果把blockquote转换为了 pre code, 显示效果就是这样,
代码高亮会覆盖我特意设置的字体颜色
我还有一个场景不适合代码高亮.我在引用代码的时候, 会结合教程的内容, 对部分代码有特意设置的字体颜色. 如,
如果我使用了代码高亮, 就会变成规范的颜色.
综上所述 我还是继续用 blockquote
========
完
评论
发表评论