修改 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

G站/crazypeace/blogspot-editor-pre-code

========

后记

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