修改 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
在 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 免费账户, 本次开发的模型使用量如下
