Inject CSS into Blogger Editor Iframe with Tampermonkey

Preface

Previously improved the Blogger editor and added pre and code function buttons

Also improved the blog template to better display blockquote, pre, and code

Then I felt that the display effect inside the editor was a bit ugly. Mainly because the editor originally did not have pre and code functions, so there was no suitable display effect.

Approach

I thought, if I extract the CSS snippets from the template and apply them to the editor page, wouldn't that work?

First, I had the Agent help me extract the CSS for h2, p, blockquote, code, and pre from the template I made earlier, and got

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;
}