Add Pre/Code Buttons to Blogger Editor for Code Posts

Preface

Many people like Blogger/blogspot. The server and domain are both Google's, so you don't have to worry about others taking it down.

However, Blogger's editor is not friendly for writing code-related articles, as it lacks code and pre buttons.

Facing this problem, I've seen all kinds of solutions.

Some manually write pre code in HTML mode,

Some use plugin assistance in HTML mode,

I've come up with several workaround solutions myself

One is: utilize the editor's built-in blockquote container, and modify the display style

Another is: when writing a post, use the editor's built-in blockquote container, then use JS to convert blockquote to pre code when displaying

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

Now that AI capabilities are so powerful, today I had the thought again, letting AI analyze how the original editor works, to see if there's an opportunity 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" and intuitively felt there's a chance. If I follow this pattern, add a new button, and change the value at the H1 position to pre, it should achieve the effect of a block container

Now let's look at the italic button

I saw data-command="+italic" and intuitively felt there's a chance. If I find the underlying implementation principle, add a processing flow like "+code", then follow this template to add a new button, with data-command="+code" it should add the tag.

`Practice`

Because this development is deeply tied to the browser, I decided to use Antigravity to debug Chrome.

The specific development process is recorded as follows:

Turn on the VPN software's TUN mode, Update Antigravity, In Antigravity, use the /browser command, Follow the prompts to open chrome://inspect/#remote-debugging in Chrome Antigravity confirms successful Chrome debugging connection Log in to blogger.com in Chrome, and open the editor page (Detailed operations omitted above)

In F12 developer mode, find the HTML element location path of the italic button

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)") When the editor has text selected, pressing this button adds italic to the text, analyze the overall call logic Antigravity worked busily and talked a lot. I didn't look. Just left these analyses 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 on the right side of this button. When this new button is pressed, wrap the selected text with ... tags Antigravity worked busily and got it done. I tested it in the browser myself, and the effect is also correct. Next is to implement the effect. Same as before, first use F12 developer mode to find the HTML element location 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  主标题 The effect achieved is that after clicking, a dropdown menu is displayed. In the dropdown menu there is a main heading button. When the main heading button is clicked, the text at the cursor is set to the H1 tag Analyze the working principle Antigravity worked busily and talked a lot. I didn't look. Just left these analyses in the context. At this point, I checked the model usage, and my free account's Gemini weekly quota was almost used up, so I switched the model to Claude Opus 4.6 (Thinking) , and I said I hope to use the same principle to add a button that sets the block-level container to the .... tags Antigravity worked busily and got it done. I tested it in the browser myself, and the effect is also correct. Github https://github.com/crazypeace/blogspot-editor-pre-code ======== Postscript Finally, I'd like to mention that I'm an Antigravity free account, and the model usage for this development is as follows