WordPress文章中如何优雅地插入代码块

在WordPress博客中分享技术内容时，代码块的展示是一个常见需求。本文将详细介绍几种在WordPress文章中插入代码块的方法，帮助您提升技术文章的可读性和专业性。

方法一：使用Gutenberg编辑器内置代码块

WordPress 5.0之后引入的Gutenberg编辑器提供了原生的代码块支持：

1. 在文章编辑界面点击”+“按钮添加新块
2. 搜索并选择”代码”块
3. 粘贴您的代码到代码块中
4. 右侧面板可以设置代码语言(如HTML、CSS、JavaScript等)

<!-- 示例HTML代码 -->
<div class="container">
<h1>欢迎来到我的博客</h1>
<p>这是一个示例代码块</p>
</div>

方法二：使用经典编辑器配合短代码

如果您仍在使用经典编辑器，可以安装代码高亮插件如”SyntaxHighlighter Evolved”：

1. 安装并激活插件
2. 在文章中使用短代码包裹代码

[code lang="php"]
<?php
function hello_world() {
echo "Hello, WordPress!";
}
?>
[/code]

方法三：手动添加HTML pre和code标签

对于喜欢手动控制的用户，可以直接编辑HTML：

<pre><code class="language-javascript">
// JavaScript示例
function calculateSum(a, b) {
return a + b;
}
console.log(calculateSum(5, 3));
</code></pre>

专业代码高亮插件推荐

1. WP Code Highlight.js - 轻量级，支持多种语言
2. Enlighter - 高度可定制，支持行号显示
3. Prism Syntax Highlighter - 流行的前端高亮方案

最佳实践建议

1. 保持代码简洁，只展示相关部分
2. 添加适当的注释说明
3. 考虑移动端显示效果
4. 为长代码块添加折叠功能
5. 提供可复制的代码(避免图片形式)

通过以上方法，您可以在WordPress文章中完美展示代码，提升读者的阅读体验和技术文章的专业性。