WordPress中如何在文章中优雅地显示代码

在WordPress网站中展示代码片段是技术博客和开发者网站的常见需求。本文将介绍几种在WordPress文章中显示代码的有效方法，确保代码格式清晰、语法高亮且易于阅读。

一、使用WordPress内置的代码块

WordPress 5.0以上版本引入了古腾堡编辑器，其中包含专门的代码块：

1. 在编辑器中点击”+“按钮添加新块
2. 搜索并选择”代码”块
3. 粘贴你的代码内容

<!-- 示例HTML代码 -->
<div class="container">
<h1>欢迎来到我的网站</h1>
</div>

二、使用SyntaxHighlighter插件

SyntaxHighlighter是最受欢迎的代码高亮插件之一：

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

[code language="python"]
def hello_world():
print("Hello, World!")
[/code]

三、使用Prism.js实现高级高亮

对于更专业的需求，可以手动集成Prism.js：

1. 在主题的functions.php中添加：

function add_prism() {
wp_enqueue_style('prism-css', 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css');
wp_enqueue_script('prism-js', 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js');
}
add_action('wp_enqueue_scripts', 'add_prism');

1. 然后在文章中使用<pre><code class="language-php">标签包裹代码

四、使用Gutenberg自定义HTML块

对于简单的内联代码，可以使用反引号： echo "Hello World";

对于多行代码，使用自定义HTML块：

// JavaScript示例
function calculateSum(a, b) {
return a + b;
}

最佳实践建议

1. 始终对代码中的特殊字符进行转义
2. 为代码块添加适当的语言类名以实现语法高亮
3. 考虑添加”复制代码”功能提升用户体验
4. 保持代码块宽度适中，避免水平滚动条
5. 为移动设备优化代码显示效果

通过以上方法，你可以在WordPress文章中专业地展示各种编程语言的代码片段，提升技术内容的可读性和专业性。