辣鱼

在 WordPress 主题中添加代码高亮功能可以通过 插件 或 手动集成代码高亮库 实现。以下是两种方法的详细步骤：

一、使用插件（推荐方式）

方法 1：WP Code Highlight.js

特点：轻量级、支持自动语言检测、兼容 Gutenberg 编辑器。

步骤：

1. 安装插件：
   • 进入 WordPress 后台 → 插件 → 安装插件
   • 搜索 “WP Code Highlight.js” → 安装并激活
2. 配置插件：
   • 进入 设置 → WP Code Highlight.js
   • 选择主题样式（如 atom-one-dark）
   • 启用行号显示（可选）
   • 保存设置
3. 使用代码块：
   • 在文章/页面编辑器中，使用 Gutenberg 的 代码块（Code block）
   • 输入代码（无需添加额外标签）：

<pre><code>
// JavaScript 示例
function hello() {
console.log(“Hello World”);
}
</code></pre>

方法 2：Enlighter

特点：支持多种主题、行号、代码复制按钮。

步骤：

1. 安装插件：
   • 搜索并安装 “Enlighter” 插件 → 激活
2. 配置插件：
   • 进入 Enlighter → Settings
   • 选择主题（如 Atomic）
   • 开启行号（Line Numbers）和代码工具栏（Toolbar）
   • 保存设置
3. 使用短代码：

[enlighter lang=”javascript”]
function hello() {
console.log(“Hello World”);
}
[/enlighter]

二、手动集成 Prism.js（无插件方案）

步骤 1：下载 Prism.js 资源

1. 访问 Prism.js 官网
2. 选择需要的：
   • 主题（如 Tomorrow Night）
   • 语言支持（如 JavaScript、CSS、PHP）
   • 插件（如行号、高亮指定行）
3. 下载 prism.css 和 prism.js

步骤 2：上传文件到 WordPress 主题

1. 通过 FTP 或文件管理器，将文件上传到当前主题目录：
   • prism.css → /wp-content/themes/your-theme/css/
   • prism.js → /wp-content/themes/your-theme/js/

步骤 3：修改主题文件

1. 添加 CSS/JS 引用
   编辑主题的 functions.php 文件（建议使用子主题）：

function add_prism_assets() {
// 引入 Prism.js CSS
wp_enqueue_style(
‘prism-css’,
get_stylesheet_directory_uri() . ‘/css/prism.css’
);

// 引入 Prism.js JS
wp_enqueue_script(
‘prism-js’,
get_stylesheet_directory_uri() . ‘/js/prism.js’,
array(), // 无依赖
‘1.0’,
true // 在页面底部加载
);
}
add_action(‘wp_enqueue_scripts’, ‘add_prism_assets’);

2.配置代码块渲染
在主题的 functions.php 中添加过滤器，确保 WordPress 不转义代码：

function prism_code_escape($content) {
$content = str_replace(‘<pre>’, ‘<pre class=”line-numbers”>’, $content);
return $content;
}
add_filter(‘the_content’, ‘prism_code_escape’);

步骤 4：使用代码块

在文章编辑器中，用以下格式包裹代码：

<pre class=”line-numbers”><code class=”language-javascript”>
// JavaScript 示例
function hello() {
console.log(“Hello World”);
}
</code></pre>

三、效果验证

1. 发布文章后，检查页面：
   • 代码是否高亮显示
   • 行号是否正常显示（如果启用）
   • 不同语言的语法是否正确识别
2. 常见问题解决：
   • 代码未高亮：检查控制台是否有 JS 错误
   • 样式冲突：在主题 CSS 中添加 !important 覆盖
   • 语言未识别：确保 <code> 标签的 class 正确（如 language-php）

四、扩展配置（可选）

1. 支持 Gutenberg 代码块

编辑主题的 functions.php：

function prism_gutenberg_block($block_content, $block) {
if ($block[‘blockName’] === ‘core/code’) {
return ‘<pre class=”line-numbers”><code class=”language-php”>’ . esc_html($block[‘innerHTML’]) . ‘</code></pre>’;
}
return $block_content;
}
add_filter(‘render_block’, ‘prism_gutenberg_block’, 10, 2);

2. 添加复制代码按钮

在 prism.js 后引入插件：

wp_enqueue_script(
‘prism-copy-to-clipboard’,
‘https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js’,
array(‘prism-js’), // 依赖 Prism.js
‘1.0’,
true
);

五、推荐工具组合

通过以上方法，你可以为 WordPress 主题添加美观且实用的代码高亮功能。如果遇到问题，建议先检查浏览器控制台的报错信息，并确保所有资源文件路径正确。