WordPress文章中添加代码块的方法指南

在WordPress博客中分享技术内容时，经常需要展示代码片段。本文将详细介绍几种在WordPress文章中优雅添加代码块的方法。

一、使用Gutenberg编辑器内置功能

WordPress 5.0+版本自带的Gutenberg编辑器提供了简单的代码块功能：

1. 在文章编辑界面点击”+“添加新块
2. 搜索并选择”代码”块类型
3. 粘贴您的代码内容
4. 右侧面板可设置语言高亮(需安装语法高亮插件支持)

二、安装专用插件

对于更专业的代码展示需求，推荐安装以下插件：

1. SyntaxHighlighter Evolved

• 支持多种编程语言语法高亮
• 使用短代码包裹代码：[code language="python"]你的代码[/code]
• 提供行号显示和代码复制功能

2. WP Code Highlight.js

• 基于highlight.js库
• 自动检测语言类型
• 轻量级，不影响网站速度

3. Enlighter - Customizable Syntax Highlighter

• 可视化工具栏编辑代码
• 多种主题可选
• 支持移动设备响应式显示

三、手动添加HTML代码块

如果您熟悉HTML，可以直接使用<pre>和<code>标签：

<pre><code class="language-php">
function hello_world() {
echo "Hello, WordPress!";
}
</code></pre>

四、注意事项

1. 安全性：确保只展示可信代码，避免执行危险代码
2. 可读性：选择适合您网站主题的配色方案
3. 移动适配：测试代码块在不同设备上的显示效果
4. 性能：过多代码块可能影响页面加载速度

五、最佳实践建议

• 为长代码添加”展开/收起”功能
• 提供代码下载链接
• 添加必要的代码说明注释
• 保持一致的代码展示风格

通过以上方法，您可以在WordPress文章中专业地展示代码内容，提升技术博客的质量和可读性。