修改 Blogger 编辑器 增加 代码片段code 和 代码块pre 按钮
前言
Blogger/blogspot 有不少人喜欢, 服务器和域名都是google的, 不怕别人打.
但是 Blogger 的编辑器对写代码的文章不友好, 没有 code 和 pre 按钮.
面对这个问题, 我看到过各种各样的方案.
我自己研究出了几种绕过的方案
一种是: 利用编辑器自带的 引用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
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)
如果我想实现这么一个效果, 在这个按钮的右侧新增一个按钮, 按这个新按钮时对选择的文字前后添加<code>... </code>的标签包裹
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>
Antigravity 就忙啊忙啊, 讲了一大堆.
我不看.
就把这些分析留在上下文里.
这时, 我看了一下模型的用量, 我这个免费账户的Gemini周用量已经快用完了, 所以模型切换为 Claude Opus 4.6 (Thinking) , 我说
我希望用同样的原理, 增加一个按钮, 功能是给块级容器设置 <pre> .... </pre> 标签
Antigravity 就忙啊忙啊, 搞定了.
我自己在浏览器中测试, <pre>效果也是正确的.
Github
https://github.com/crazypeace/blogspot-editor-pre-code
评论
发表评论