Add Pre/Code Buttons to Blogger Editor for Code Posts

Preface

Many people like Blogger/blogspot, the server and domain are both from Google, no need to worry about being attacked.

However, Blogger's editor is not friendly for writing posts with code; there are no code or pre buttons.

To deal with this problem, I've seen all kinds of solutions.

some use plugins to assist in HTML mode,

I came up with several workaround methods on my own.

One is: using the editor's built-in blockquote block container, and restyling its appearance

Another is: while writing the post, use the editor's built-in blockquote block container, and use JS to convert blockquote into pre code when displaying

Yet another is: write plain Markdown text directly in HTML mode, and use JS to convert it to HTML when displaying

With AI being so powerful these days, I got the itch again today to let AI analyze how the original editor works and see if there's a chance to enhance the editor.

Exploration

The starting move is still the browser's F12 developer mode.

First, let's look at the button for setting the main heading h1.

I saw data-value="H1" Intuitively, I felt this could work. If I follow this pattern and add a new button, changing the value at the H1 position to pre, I should be able to achieve the effect of the block container <pre>.

Now let's look at the italic button.

Chrome DevTools Elements panel with the italic command div selected in the Blogger editor

I saw data-command="+italic" Intuitively, I felt this could work. If I find the underlying implementation principle and add a processing flow for something like "+code", then follow this template to add a new button with data-command="+code", I should be able to add the <code> tag.

Practice

Because this development is deeply tied to the browser, I decided to use Antigravity's Chrome debugging approach.

The specific development process is recorded as follows:

Turn on the VPN software's TUN mode,
Update Antigravity,
Use the /browser command in Antigravity,
Follow the prompts to open chrome://inspect/#remote-debugging in Chrome
Antigravity confirms the Chrome debug connection is successful
Log in to blogger.com in Chrome, and open the editor page

(Detailed steps omitted above)

Find the HTML element selector path of the italic button in F12 developer mode.

In Antigravity, I said (at this point, the model used is Gemini 3.7 Flash Medium Fast)

Pay attention to this element on the page
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)")
After selecting text in the editor, clicking this button makes the text italic.
Analyze the overall calling logic.

Antigravity worked and worked, and talked a lot.
I didn't read it.
I just left that analysis in the context.

Then I said (at this point, the model used is Gemini 3.7 Flash Medium Fast)

If I want to achieve this effect: add a new button to the right of this button. When this new button is pressed, wrap the selected text with <code>... </code> tags.

Antigravity worked and worked, and got it done.

I tested it myself in the browser, and the <code> effect was correct.

Next is implementing the <pre> effect. Same thing: first use F12 developer mode to find the HTML element selector path of the main heading h1 button.

In Antigravity, I said (at this point, the model used is Gemini 3.7 Flash Medium Fast)

Pay attention to analyzing this element on the page
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)")
It has child elements like this
<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">Heading</span></div>

The desired effect is: after clicking, a dropdown menu appears. The dropdown menu contains a heading button. Clicking the heading button sets the text where the cursor is located to the H1 tag.

Analyze how it works.

Antigravity worked and worked, and talked a lot.
I didn't read it.
I just left that analysis in the context.

At this point, I checked the model's usage. The weekly Gemini quota on my free account was almost used up, so I switched the model to Claude Opus 4.6 (Thinking), and I said: