前言

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

在 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 就忙啊忙啊, 搞定了.

我自己在浏览器中测试, <code>效果也是正确的.

接下来, 就是实现 <pre> 的效果了. 一样的, 先用 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)") 他有像这样的子元素 <div class="MocG8c m5D6Fd LMgvRb" jsname="wQNmvb" jsaction="" data-value="H1" aria-selected="false" tabindex="-1"><div class="kRoyt MbhUzd" jsname="ksKsZd"></div><div class="MWQFLe uLX2p" aria-hidden="true"><span class="DPvwYc YK7a4e" aria-hidden="true"></span></div><span jsslot="" class="vRMGwf oJeWuf">主标题</span></div>

实现的效果是点击之后会显示一个下拉菜单, 下拉菜单中有主标题的按钮, 当点击主标题的按钮后, 会对光标所在的文字设置为 H1 标签

分析工作原理

Antigravity 就忙啊忙啊, 讲了一大堆. 我不看. 就把这些分析留在上下文里.

这时, 我看了一下模型的用量, 我这个免费账户的 Gemini 周用量已经快用完了, 所以模型切换为 Claude Opus 4.6 (Thinking) , 我说

我希望用同样的原理, 增加一个按钮, 功能是给块级容器设置 <pre> .... </pre> 标签

Antigravity 就忙啊忙啊, 搞定了.

我自己在浏览器中测试, <pre>效果也是正确的.

Github

https://github.com/crazypeace/blogspot-editor-pre-code

========

后记

最后提一下, 我是 Antigravity 免费账户, 本次开发的模型使用量如下