如何在 Blogger 中插入代码块并美观地展示代码

七月 13, 2025 ·
Blogger Guide · Technical Craft

如何在 Blogger 中优雅地插入并展示代码块

告别错乱排版与背景污染：从原生 HTML 结构到高颜值单篇代码渲染指南

在 Blogger (Google Blogspot) 撰写技术文章或分享脚本时，很多博主常会遭遇两个棘手的问题：

  • 富文本编辑器自带的缩进会将代码格式打乱，甚至把特殊符号（如 <、>）直接解析成网页标签；
  • 直接套用网上的通用 CSS 代码后，导致整篇博客的背景、正文以及左右两边的侧边栏全被污染变形。

本指南将用清晰的工程化逻辑，教你如何在 Blogger 中安全、美观地展示各类编程代码。

一、底层原理：语义化 <pre> 与 <code>

在 HTML 标准中，展示代码必须遵循两层语义结构：

  • <pre> (Preformatted Text)： 告诉浏览器“保留所有的空格、换行与缩进”，杜绝普通段落自动吃空格的问题；
  • <code> (Code Fragment)： 标明其内容为计算机代码，以便采用等宽字体（Monospace）渲染。
⚠️ Blogger 的排坑底线：
如果在代码中包含 HTML 标签或数学比较符号，必须在代码中进行实体转义，否则 Blogger 会直接把它们当作网页元素渲染！
  • 把 < 转义为 &lt;
  • 把 > 转义为 &gt;
  • 把 & 转义为 &amp;

二、单篇即插即用：现代暗晶风代码卡片（推荐）

如果你不想大动干戈去修改 Blogger 的全局模板主题，可以直接在单篇博文中采用“独立类名隔离”的方式。即使该博文有自己的深色代码框，也绝对不会波及站点的左右两边。

Step 01
切换到「HTML 视图」

在 Blogger 编辑器左上角，点击铅笔图标，将其由“撰写视图”切换为 HTML 视图。

Step 02
粘贴代码块专用容器

在需要展示代码的位置，粘贴包含仿 Mac 终端顶栏的代码结构：

HTML
<!-- 示例：单篇可直接套用的代码容器结构 -->
<div style="background: #090d12; border: 1px solid #30363d; border-radius: 8px; overflow: hidden; margin: 1.5rem 0;">
  <div style="background: #161b22; padding: 8px 14px; display: flex; justify-content: space-between; border-bottom: 1px solid #30363d;">
    <span style="color: #6e7681; font-family: monospace; font-size: 12px;">BASH / POWERSHELL</span>
  </div>
  <pre style="margin: 0; padding: 16px; overflow-x: auto; font-family: monospace; font-size: 14px; line-height: 1.6; color: #e6edf3;"><code># 在此处粘贴你的脚本命令
Write-Host "Hello, Blogger Code Block!"</code></pre>
</div>

三、全站自动化高亮：集成 Highlight.js（全自动化流）

如果你希望在写博客时只需输入最基础的 <pre><code class="language-python"> 就能全自动给关键字染上漂亮的语法高亮，可以在 Blogger 全局模板中引入轻量级的 Highlight.js。

全局配置
在 Blogger 主题中注入 CDN

进入 Blogger 后台 → 点击 主题 (Theme) → 在“自定义”旁边点击小三角下拉菜单 → 修改 HTML (Edit HTML)。在 </head> 之前添加以下两行：

HTML (Inject into <head>)
<!-- 引入 Highlight.js 暗色 GitHub 主题与核心 JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>document.addEventListener('DOMContentLoaded', () => { hljs.highlightAll(); });</script>

保存主题后，你在任何博文里只要这样写，页面载入时就会全自动呈现漂亮的彩色语法高亮：

PYTHON (渲染效果演示)
import asyncio
from crawl4ai import AsyncWebCrawler

async def main():
    async with AsyncWebCrawler() as crawler:
        result = await crawler.arun(url="https://000666.best")
        print(result.markdown)

asyncio.run(main())

四、两种代码展示方案横向对比

展示方案 是否修改全局主题 横向滚动适配 (Overflow-X) 适合场景
单篇内联样式（本篇方案） 完全不需要 原生自带 即写即发、排版要求极高、杜绝全站污染的用户
Highlight.js 自动化引擎 需注入 <head> 一次 需在主题 CSS 补齐 高频长篇技术发文、多编程语言混合的极客博主
💡 极客排版心法：
无论采用哪种方式，一定要给 pre 标签设置 overflow-x: auto; 和 white-space: pre;。这样在移动端访问时，遇到超长代码会自动出现横向滑动条，而绝不会粗暴折行导致缩进损坏！
BLOGGER CODE EMBED SPECIFICATION · CRAFTED FOR GEEK WRITING