Filed under:
How to create a code snippet block in a Blogger post? I usually use an external tool to write a post that contains code snippets. But it's certainly possible to do it in Blogger too, with HTML editing.
You might want to add a title and description to the code snippet. The <figure> tag is suitable for this. As for the code, we wrap them in <pre><code>, like so :
<!--code-->
<figure class="code-example" style="border: 1px dashed;">
<figcaption>
<strong>app.js</strong>
<p>Fetches posts from the API and renders them.</p>
</figcaption>
<pre><code class="language-js">
async function loadPosts() {
const res = await fetch('/api/posts');
}
</code></pre>
</figure>The <code class="language-js"> is used for code syntax highlighting by a 3rd party script.
The result is something like this:
Fetches posts from the API and renders them.
async function loadPosts() {
const res = await fetch('/api/posts');
}
***
That's the basics. It's only useful for raw HTML editing when the tooling is not available. I'd still recommend looking for and using an external tool for consistent formatting. It's just fun to learn the inner working like this.
https://www.blogger.com/rpc_relay.html https://www.blogger.com/comment/frame/220561901913020919?po=5697512415358465009&hl=en&saa=85391&origin=https://xmlexpr.blogspot.com&skin=contempo https://xmlexpr.blogspot.com/2026/05/codeblock-in-blogger.html#comments true ["blog-writing"]