主 题：Blogger/blogspot 编辑器 内部iframe 应用CSS 实现所见即所得WYSIWYG 油猴篡改猴tampermonkey脚本
发 布 者：crazypeace
标签分类： 技术
时 间：2026-09-13 09:32:10
内容预览：前言前面 改进了 blogger编辑器, 加入了 pre 和 code 的功能按钮也 改进了 博客的模板, 能更好的显示 blockquote, pre, code然后就觉得, 编辑器里面的显示效果有点丑. 主要是原本编辑器就没有 pre 和 code 的功能, 没有合适的显示效果.思路我就想, 如果我把 模板里面的CSS片段抽出来, 然后应用到 编辑器页面, 不就行了吗?先让Agent帮我把之前制作的模板里面关于 h2, p, blockquote, code, pre 的CSS 抽取出来, 得到h2 { border-bottom: 1px solid e8eaed; padding-bottom: 6px;}p { margin: 0.85em 0;}blockquote { margin: 1em 0; padding: 8px 16px; border-left: 4px solid dadce0; color: 5f6368; background: fafafa; line-height: 1.55;}code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; background: f1f3f4; border-radius: 4px; padding: 2px 5px;}pre { background: f8f9fa; border: 1px solid e0e0e0; border-radius: 6px; padding: 12px 14px; overflow-x: auto; line-height: 1.55;}把Stylebot插件开起来, 准备
直达链接： https://www.nodeseek.com/post-926147-1
发 布 者：crazypeace
标签分类： 技术
时 间：2026-09-13 09:32:10
内容预览：前言前面 改进了 blogger编辑器, 加入了 pre 和 code 的功能按钮也 改进了 博客的模板, 能更好的显示 blockquote, pre, code然后就觉得, 编辑器里面的显示效果有点丑. 主要是原本编辑器就没有 pre 和 code 的功能, 没有合适的显示效果.思路我就想, 如果我把 模板里面的CSS片段抽出来, 然后应用到 编辑器页面, 不就行了吗?先让Agent帮我把之前制作的模板里面关于 h2, p, blockquote, code, pre 的CSS 抽取出来, 得到h2 { border-bottom: 1px solid e8eaed; padding-bottom: 6px;}p { margin: 0.85em 0;}blockquote { margin: 1em 0; padding: 8px 16px; border-left: 4px solid dadce0; color: 5f6368; background: fafafa; line-height: 1.55;}code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; background: f1f3f4; border-radius: 4px; padding: 2px 5px;}pre { background: f8f9fa; border: 1px solid e0e0e0; border-radius: 6px; padding: 12px 14px; overflow-x: auto; line-height: 1.55;}把Stylebot插件开起来, 准备
直达链接： https://www.nodeseek.com/post-926147-1
