Blogger/blogspot 编辑器内部iframe 应用CSS 实现所见即所得WYSIWYG 油猴篡改猴tampermonkey脚本

前言

然后就觉得, 编辑器里面的显示效果有点丑. 主要是原本编辑器就没有 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;
}