修改 Blogger 编辑器 增加 代码片段code 和 代码块pre 按钮
前言 Blogger/blogspot 有不少人喜欢, 服务器和域名都是google的, 不怕别人打 . 但是 Blogger 的编辑器对写代码的文章不友好, 没有 code 和 pre 按钮. 面对这个问题, 我看到过各种各样的方案. 有 在HTML模式下手写 pre code 的 , 有 在HTML模式下用插件辅助的 , 我自己研究出了几种绕过的方案 一种是: 利用编辑器自带的 引用blockquote 块容器, 改造显示样式 另一种是: 在编写博文时, 使用 编辑器自带的 引用blockquote 块容器, 在显示时用JS 把 blockquote转换为pre code 还有一种是: 直接在HTML模式下写纯Markdown语法的文本, 在显示时用JS转换为HTML显示 现在AI能力这么强, 我今天又动了念头想, 让AI来分析一下原本的编辑器是怎么工作的, 看有没有机会对编辑器进行增强. 探索 起手式还是浏览器的F12开发者模式 先看看 设置 主标题h1 的按钮 我看到了 data-value="H1" 直觉上觉得有戏. 如果我照着这个模式, 新增一个按钮, 把H1位置的值改成pre, 应该就能实现块容器<pre>的效果了. 再看看 斜体 按钮 我看到了 data-command="+italic" 直觉上觉得有戏. 如果找到 底层的实现原理, 增加一个比如 "+code" 的处理流程, 然后照着这个模板新增一个按钮, 让 data-command="+code" 应该就能加上<code>的标签了. 实践 因为这次的开发与浏览器深度绑定, 所以我决定使用 Antigravity 调试 Chrome 的方式. 具体开发过程记录如下: 翻墙软件开TUN模式, 更新Antigravity, 在Antigravity中使用 /browser 命令, 按提示在Chrome中打开 chrome://inspect/#remote-debugging Antigravity确认调试Chrome对接成功 在Chrome中登录blogger.com, 打开编辑器页面 (以上详细操作略) 在F12开发者模式中找到 斜体按钮的 HTML元素定位path 在 Antig...