How to Insert Code Blocks in Blogger (Blogspot)
How to Insert Code Blocks in Blogger (Blogspot)
If you write about Python, SQL, PowerShell, or anything technical, you’ll eventually need clean code blocks that don’t break formatting. Blogger doesn’t have a perfect “code block” button by default, but you can get reliable results with a few simple patterns.
Method 1: The simple, built-in way (<pre><code>)
This is the most common and reliable method. You write your post normally, switch to HTML view,
and wrap your code with <pre><code>...</code></pre>.
- Open your post in Blogger.
- Switch the editor to HTML view (look for an HTML / <> toggle or dropdown).
- Paste your code wrapped like this (example below).
Example (Python):
import requests
from selectolax.parser import HTMLParser
import re
def extract_emails(url):
response = requests.get(url)
tree = HTMLParser(response.text)
emails = set(re.findall(r"[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-z]{2,}", tree.body.text()))
return list(emails)
print(extract_emails("https://example.com"))
That’s it. Blogger will preserve spacing and line breaks inside <pre>.
Important: If your code contains HTML, you must escape it
If you paste HTML code directly inside your post, Blogger may interpret it as real HTML and it won’t display as code. In that case, convert special characters:
<becomes<>becomes>&becomes&
Example (showing HTML code as text):
<div class="card">
<h1>Hello</h1>
</div>Method 2: Make code blocks look nicer (recommended)
By default, Blogger’s code blocks can look plain. A small CSS snippet gives you a clean “developer-style” box with horizontal scrolling for long lines.
Step A (one-time): add CSS to your theme
- Go to Theme → Customize → Advanced → Add CSS (or similar).
- Paste this CSS:
/* Code block styling for Blogger */
.code-block {
background: #111;
color: #f2f2f2;
padding: 14px 16px;
border-radius: 10px;
overflow-x: auto;
margin: 14px 0;
line-height: 1.45;
}
.code-block code,
.code-block pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.95rem;
}
.code-block pre {
margin: 0;
white-space: pre; /* keep formatting */
}Step B: wrap your code inside a styled container
<div class="code-block">
<pre><code>
your code goes here...
</code></pre>
</div>Example (Python, using the styled container):
import re
EMAIL_REGEX = re.compile(r"[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}")
def extract_emails_from_text(text: str):
return sorted(set(EMAIL_REGEX.findall(text)))If the styled box doesn’t appear after you add the CSS, double-check that the CSS was saved to the theme and you’re not previewing a cached version.
Method 3: Syntax highlighting (optional)
If you want keywords in color (like VS Code), you’ll need a highlighting library such as Prism.js or highlight.js. This requires adding a CSS/JS include to your theme.
High-level steps:
- Add the Prism/highlight CSS + JS to your theme (usually inside the
<head>section). - Use language classes like
language-python,language-sql, etc.
Example markup (Prism-style):
<pre class="language-python"><code class="language-python">
print("Hello, syntax highlighting")
</code></pre>Tip: If you don’t want to touch theme HTML, stick to Method 1 or Method 2. They’re stable and usually “good enough” for most blogs.
Quick copy/paste cheat sheet
- Basic block:
<pre><code>...</code></pre> - Inline code:
<code>pip install requests</code> - If your code contains HTML tags: escape
<,>, and&
Comments
Post a Comment