主 题：修改 Blogger 编辑器 增加 代码片段code 和 代码块pre 按钮
发 布 者：crazypeace
标签分类： 技术
时 间：2026-09-10 07:20:05
内容预览：前言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, 应该就能实现块容器%26lt%3bpre%26gt%3b的效果了.再看看 斜体 按钮我看到了 data-command="+italic" 直觉上觉得有戏. 如果找到 底层的实现原理, 增加一个比如 "+code" 的处理流程, 然后照着这个模板新增一个按钮, 让data-command="+code" 应该就能加上%26lt%3bcode%26gt%3b的标签了.实践因为这次的开发与浏览器深度绑定, 所以我决定使用 Antigravity 调试 Chrome 的方式.具体开发过程记录如下:翻墙软件开TUN模式,更新Antigravity,在Antigravity中使用 /browser 命令,按提示在Chrome中打开 chrome://inspect/ remote-de
直达链接： https://www.nodeseek.com/post-921103-1
发 布 者：crazypeace
标签分类： 技术
时 间：2026-09-10 07:20:05
内容预览：前言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, 应该就能实现块容器%26lt%3bpre%26gt%3b的效果了.再看看 斜体 按钮我看到了 data-command="+italic" 直觉上觉得有戏. 如果找到 底层的实现原理, 增加一个比如 "+code" 的处理流程, 然后照着这个模板新增一个按钮, 让data-command="+code" 应该就能加上%26lt%3bcode%26gt%3b的标签了.实践因为这次的开发与浏览器深度绑定, 所以我决定使用 Antigravity 调试 Chrome 的方式.具体开发过程记录如下:翻墙软件开TUN模式,更新Antigravity,在Antigravity中使用 /browser 命令,按提示在Chrome中打开 chrome://inspect/ remote-de
直达链接： https://www.nodeseek.com/post-921103-1
