WordPress中插入代码的几种方法

在 WordPress 正文中插入代码并确保可以直接复制，有以下几种方法：

### 方法 1：使用 `<pre>` 和 `<code>` 标签
1. 切换到 WordPress 编辑器的“文本”模式（经典编辑器）或“代码编辑器”模式（Gutenberg 编辑器）。
2. 使用 HTML 标签包裹代码，例如：
“`html
<pre><code>
这里是你的代码
</code></pre>
“`
3. 保存并预览，代码会以固定格式显示，用户可以直接复制。

– **优点**：简单，无需插件。
– **缺点**：没有语法高亮，样式较朴素。

—

### 方法 2：使用代码块（Gutenberg 编辑器）
1. 在 Gutenberg 编辑器中，点击“+”添加新块。
2. 搜索并选择“代码”块（Code Block）。
3. 将代码粘贴进去，保存即可。
4. 用户可以直接复制代码。

– **优点**：内置功能，操作简单。
– **缺点**：默认没有语法高亮。

—

### 方法 3：安装代码高亮插件（推荐）
为了让代码更美观并支持语法高亮，可以使用插件，例如 **SyntaxHighlighter Evolved** 或 **Highlighting Code Block**：

#### 使用 SyntaxHighlighter Evolved
1. 在 WordPress 后台，前往“插件” > “安装插件”，搜索“SyntaxHighlighter Evolved”。
2. 安装并激活插件。
3. 在编辑器中，使用短代码包裹代码，例如：
“`html
[php]echo “Hello World”;[/php]
“`
支持多种语言，如 `[php]`、`[html]`、`[css]`、`[javascript]` 等。
4. 保存后，页面会显示带有语法高亮的代码，用户可以复制。

#### 使用 Highlighting Code Block
1. 安装并激活“Highlighting Code Block”插件。
2. 在 Gutenberg 编辑器中添加“代码”块。
3. 插件会自动增强代码块，支持选择语言并显示高亮效果。
4. 用户可以直接复制代码。

– **优点**：支持语法高亮，样式美观，用户体验好
– **缺点**：需要安装插件。

—

### 注意事项
– 如果希望代码整洁且易复制，避免在代码中手动换行或添加多余空格。
– 测试复制功能：发布后，访问页面，确认代码可以完整复制而不丢失格式。