[Blogger] 修改 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, 应该就能实现块容器 的效果了. 再看看 斜体 按钮 我看到了 data-command="+italic" 直觉上觉得有戏. 如果找到 底层的实现原理, 增加一个比如 "+code" 的处理流程, 然后照着这个模板新增一个按钮, 让 data-command="+code" 应该就能加上 的标签了. 实践 因为这次的开发与浏览器深度绑定, 所以我决定使用 Antigravity 调试 Chrome 的方式. 具体开发过程记录如下: 翻墙软件开 TUN 模式, 更新 Antigravity, 在 Antigravity 中使用 /browser 命令, 按提示在 Chrome 中打开 chrome://inspect/#remote-debugging Antigravity 确认调试 Chrome 对接成功 在 Chrome 中登录 blogger.com , 打开编辑器页面 (以上详细操作略) 在 F12 开发者模式中找到 斜体按钮的 HTML 元素定位 path 在 Antigravity 中, 我说 (此时, 使用的模型是 Gemini 3.7 Flash Medium Fast ) 你注意页面中的这个元素 document.querySelector("#yDmH0d > c-wiz:nth-child(15) > div > c-wiz > div > div.MJkged > div > div > div.y3IDJd.Fx3kmc.fmzcZd > span > div > div.P8hSs.pEg5pc.CDANdb.ZsY9oc > div.Qy5T6b.O3LMFb.QduVPe > div.Wdqgzf > div.QM4iYb > div:nth-child(3)") 当编辑器选中了文字以后, 再按这个按钮, 文字就被加上了 斜体, 分析整体的调用逻辑 Antigravity 就忙啊忙啊, 讲了一大堆. 我不看. 就把这些分析留在上下文里. 然后我说 (此时, 使用的模型是 Gemini 3.7 Flash Medium Fast ) 如果我想实现这么一个效果, 在这个按钮的右侧新增一个按钮, 按这个新按钮时对选择的文字前后添加 ... 的标签包裹 Antigravity 就忙啊忙啊, 搞定了. 我自己在浏览器中测试, 效果也是正确的. 接下来, 就是实现 的效果了. 一样的, 先用 F12 开发者模式找到 主标题 h1 的按钮的 HTML 元素定位 path 在 Antigravity 中, 我说 (此时, 使用的模型是 Gemini 3.7 Flash Medium Fast ) 注意分析页面中的这个元素 document.querySelector("#yDmH0d > c-wiz:nth-child(15) > div > c-wiz > div > div.MJkged > div > div > div.y3IDJd.Fx3kmc.fmzcZd > span > div > div.P8hSs.pEg5pc.CDANdb.ZsY9oc > div.Qy5T6b.O3LMFb.QduVPe > div.Wdqgzf > div.oFycQ > div.eaelpe > div > div:nth-child(1)") 他有像这样的子元素  主标题 实现的效果是点击之后会显示一个下拉菜单, 下拉菜单中有主标题的按钮, 当点击主标题的按钮后, 会对光标所在的文字设置为 H1 标签 分析工作原理 Antigravity 就忙啊忙啊, 讲了一大堆. 我不看. 就把这些分析留在上下文里. 这时, 我看了一下模型的用量, 我这个免费账户的 Gemini 周用量已经快用完了, 所以模型切换为 Claude Opus 4.6 (Thinking) , 我说 我希望用同样的原理, 增加一个按钮, 功能是给块级容器设置 .... 标签 Antigravity 就忙啊忙啊, 搞定了. 我自己在浏览器中测试, 效果也是正确的. Github /ai-market-guide/ ======== 后记 最后提一下, 我是 Antigravity 免费账户, 本次开发的模型使用量如下