How to Add Code Blocks in Blogger: Copy Button, Tabs and HTML Escape Tool

HTML code must be escaped before you paste it into a post. If you paste <p> as it is, Blogger treats it as real HTML: the tag disappears from the block, or it breaks the layout of the whole post. Use the HTML escape tool at the end of this page. It converts your code and wraps it in a ready-made block.

Why code has to be escaped

The browser reads < and > as the start and end of a tag. To show them as text, they have to be written as entities:

So <b>Hello</b> is written in the post as <b>Hello</b>. You don't have to do this by hand; the tool below does it for you.

CSS and JavaScript that contain no <, > or & can be pasted as they are. When in doubt, run them through the tool anyway. It never hurts.

The three layouts

1. Card with header bar

This is the default. The language name sits on the left, and the Wrap and Copy buttons sit on the right. Set the language with data-type.

<p class="note">Your text here.</p>

<div class="pre" data-type="HTML"><pre>
Your escaped code here
</pre></div>

2. Minimal

Add min to hide the header bar. The language label and the buttons float in the top corner of the code.

.note {
  padding: 1rem;
  border-radius: 12px;
}

<div class="pre min" data-type="CSS"><pre>
Your escaped code here
</pre></div>

3. Tabs

Add tab and put several <pre> blocks inside, one per file. Each data-type becomes a tab name. The Copy button copies the tab that is open.

<button class="btn">Click me</button>

.btn {
  padding: .5rem 1rem;
  border-radius: 8px;
}

document.querySelector('.btn').addEventListener('click', function () {
  alert('Hello');
});

<div class="pre tab">
<pre data-type="HTML">...</pre>
<pre data-type="CSS">...</pre>
<pre data-type="JS">...</pre>
</div>

A plain <pre> works too

If you write a <pre> without the wrapper, the theme adds the header bar and buttons to it by itself. Put data-type on the <pre> to show the language.

<pre data-type="HTML">Your escaped code here</pre>

Options

Start with lines wrapped

Long lines scroll sideways by default. Add wrap to start with the Wrap switch on. Readers can still turn it off.

<meta name="description" content="A long line that would normally scroll sideways, but here it breaks onto the next line because the block starts with the Wrap switch turned on.">

<div class="pre wrap" data-type="HTML"><pre>...</pre></div>

No copy button

Add nocopy when the code is only for reading, like terminal output.

<div class="pre nocopy" data-type="Output"><pre>...</pre></div>

No toolbar at all

Give a <pre> the class plain to keep it as a simple box with no header bar and no buttons.

<pre class="plain">...</pre>

Highlight parts of the code

Wrap any part in a <span> with a color class, or in <mark> for the part the reader has to replace. These tags are not escaped, because they are meant to work as HTML.

<p class="note">Your text here.</p>

<span class="green">&lt;p</span> class=<span class="orange">"note"</span><span class="green">&gt;</span><mark>Your text here.</mark>...

Available classes: green, orange, blue, red, gray, and <mark>.

Quick reference

HTML escape tool

Paste your code in the HTML Escape Tool, choose a layout, and press Convert. The tool escapes your code and wraps it in a ready-made code block. Copy the result and paste it in the post editor's HTML view.

Bookmark the tool. You will need it every time you add HTML code to a post.