Blogger最适合我的 还是不用代码高亮 / 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

更自由地使用 各种一键脚本(未裁剪)

 像我这样的小白们, 入门的第一步, 最常见的就是使用各种一键脚本先实现自己的基本需求. 接着随着时间的推移, 我们慢慢会觉得这些一键脚本有各种各样"不爽"的地方. 那么, 我们可以利用linux的文本修改工具sed, 达到查找替换, 添加, 删除等效果. 极简一键脚本带参数使用时, 跳过确认参数的步骤 bash <(curl -L https://github.com/crazypeace/xray-vless-reality/raw/main/install.sh | sed '/pause()\s*{/a return') 4 8443 原理解释  https://zelikk.blogspot.com/2024/10/cp-bash-skip-pause.html 强行重装233boy的sing-box脚本 bash <(wget -qO- -o- https://github.com/233boy/sing-box/raw/main/install.sh | sed '/err()\s*{/a return') 强行重装233boy的v2ray脚本 bash <(wget -qO- -o- https://git.io/v2ray.sh | sed '/err()\s*{/a return') 强行重装233boy的xray脚本 bash <(wget -qO- -o- https://github.com/233boy/Xray/raw/main/install.sh | sed '/err()\s*{/a return') 原理解释  https://zelikk.blogspot.com/2024/12/233boy-sing-box-install-err-skip.html 233boy的sing-box脚本安装完成后, 修改配置时强行跳过验证域名DNS解析报错 安装完后, 先执行 find /etc/sing-box/sh -type f -name "*.sh" -exec sed -i '/err()\s*{/a return' {} + 再按正常操作修改配置. 原理解释  https://zeli...
Read more »

强行重装 233boy的sing-box脚本 取消脚本报错退出的逻辑

图片
如果你的VPS安装过233boy的sing-box脚本,  但是不知道什么原因, (当然很可能是你自己乱搞的原因 XD ) 现在用起来有问题,  而当你重装的时候, 脚本提示你用 sing-box reinsall, 而当你用 sing-box reinsall 的时候, 又提示报错 那么, 我们有一个思路是, 把脚本报错的逻辑跳过, 这样可以让重装操作继续下去. 思路跟 跳过DNS解析检验报错 一样, 在 err() 函数下面直接插一行 return 体现在一键安装脚本上, 变化思路和 跳过kejilion的脚本里的一些逻辑 的原理一样. 最终成果如下 bash <(wget -qO- -o- https://github.com/233boy/sing-box/raw/main/install.sh | sed '/err()\s*{/a return' ) ======== 后记 当然, 这样做的后果就是脚本中原有的报错退出逻辑也全都失效了, 所以你要确保使用的参数都是正确的. 同理可得 233boy的v2ray脚本 bash <(wget -qO- -o- https://git.io/v2ray.sh  | sed '/err()\s*{/a return' ) 233boy的xray脚本 bash <(wget -qO- -o- https://github.com/233boy/Xray/raw/main/install.sh  | sed '/err()\s*{/a return' )  
Read more »

在不同的平台部署 webssh 自定义添加不同的标识 修改部署的文件

图片
webssh 可以部署在 koyeb, fly.io, serv00 教程: https://zelikk.blogspot.com/2023/10/huashengdun-webssh-codesandbox.html https://zelikk.blogspot.com/2023/10/github-codespaces-flyio-webssh.html https://linux.do/t/topic/211113 在有人反馈的时候, 想知道是部署在哪个平台上的出了问题, 那么可以自定义添加不同的标识, 如: https://ssh.icdyct.nyc.mn/ http://ssh.icdyct.live/ https://flyio-webssh.fly.dev/ 本质上是修改文件. 这里, 你需要修改 webssh/templates/index.html HTML语法略.  本文我想记录一下, 针对不同的平台, 用什么方法修改文件. Koyeb 在部署完成后, 点击你部署的service 有一个 console 功能 在这里, 你可以修改文件. 比如, nano webssh/templates/index.html fly.io 我的教程是使用 Github Codespaces 来部署 ,  这里实际上 Github Codespaces 是生成了一个 "临时的" 环境, 里面有你的 repo 的所有文件的一份复制. 我们可以在 fly deploy 之前, 修改这个环境里的文件. 如, nano webssh/templates/index.html 这个修改只应用到 Github Codespaces 生成的这一份临时复制文件, 不影响你的原始 repo serv00 整个过程是在 serv00 的环境上操作 , 当然可以直接修改 serv00 上面的文件. 就是普通的 linux 命令行操作. nano webssh/templates/index.html serv00 用 Xshell 去登录的话, 登录方式选 Keyboard Interactive ======= koyeb 上面的修改方式是"临时"的. 如果项目重启, 那么会恢复到一开始的...
Read more »