wordpress 代码高亮

在 WordPress 中实现代码高亮，可以通过多种方式完成。以下详细介绍几种常见的方法：

1. 使用内置的 pre 和 code 标签

WordPress 默认支持 <pre> 和 <code> HTML 标签，可用于简单地显示代码块，但不会进行语法高亮。

示例代码：

<pre><code class="language-php">
<?php
echo 'Hello, World!';
?></code></pre>

使用此方法时，需要手动添加 class="language-xxx" 来指定语言类型（如 language-php, language-js, language-css 等）。

2. 使用插件：SyntaxHighlighter Evolved

这是 WordPress 上非常流行的代码高亮插件，支持多种语言，并提供美观的样式。

安装与使用步骤：

1. 登录到 WordPress 后台。

2. 进入 插件 > 安装插件。

3. 搜索 "SyntaxHighlighter Evolved"。

4. 点击 安装，然后 激活。

5. 在编辑文章时，使用如下格式插入代码：

   [sourcecode language="php"]
   <?php
   echo 'Hello, World!';
   ?>
   [/sourcecode]

6. 支持的语言包括：PHP、JavaScript、CSS、HTML、Python、Java 等。

3. 使用插件：Crayon Syntax Highlighter

这是一个功能强大的代码高亮插件，支持多种语言和主题。

安装与使用：

1. 在后台安装并激活 Crayon Syntax Highlighter。

2. 编辑文章时，使用如下格式：

   [crayon-1]
   <?php
   echo 'Hello, World!';
   ?>
   [/crayon-1]

3. 可以自定义样式、主题、行号等设置。

4. 使用插件：WP Code Highlight

这个插件提供了简洁的界面和良好的兼容性。

使用方法：

1. 安装并激活插件。
2. 编辑文章时，在编辑器中选择“代码”按钮，输入代码并选择语言。

5. 使用 JavaScript 库：Prism.js 或 Highlight.js

可以将 Prism.js 或 Highlight.js 集成到 WordPress 主题中，实现客户端代码高亮。

方法步骤：

1. 下载 Prism.js 或 Highlight.js 的 JS 和 CSS 文件。

2. 将文件上传到 WordPress 主题的 js/ 和 css/ 文件夹中。

3. 在主题的 functions.php 文件中注册脚本和样式：

   function enqueue_code_highlighting() {
      wp_enqueue_style('prism', get_template_directory_uri() . '/css/prism.css');
      wp_enqueue_script('prism', get_template_directory_uri() . '/js/prism.js', array(), null, true);
   }
   add_action('wp_enqueue_scripts', 'enqueue_code_highlighting');

4. 在文章中使用 <pre><code class="language-xxx">...</code></pre> 标签。

6. 使用 Gutenberg 块编辑器中的代码块

在 WordPress 5.0 及以上版本中，Gutenberg 编辑器自带了“代码”块。

使用方法：

1. 在编辑器中点击 “+” 按钮。
2. 选择 “代码” 块。
3. 输入代码，并选择语言（如 PHP、JavaScript 等）。
4. 插件会自动应用语法高亮。

7. 自定义代码高亮（进阶）

如果希望自定义样式或集成其他库，可以在主题中添加自定义 CSS 和 JS 文件，并通过 wp_enqueue_style() 和 wp_enqueue_script() 注册。

以上是 WordPress 实现代码高亮的详细方法，涵盖插件、HTML 标签、JavaScript 库等多种方式。