为 WordPress 添加 Highlight.js 代码高亮支持（本地部署优化方案）

在 WordPress 博客中展示代码时，为了提高可读性和美观性，添加代码高亮是非常有必要的。本文将介绍如何使用 Highlight.js 在 WordPress 中实现本地部署的代码高亮功能，避免使用 CDN，提高加载速度和稳定性。

一、为什么选择 Highlight.js？

Highlight.js 是一款轻量、功能强大的前端代码高亮库，支持 190+ 种语言，并提供数十种美观主题，能自动检测语言、支持嵌套代码，非常适合博客和技术类网站。

二、如何下载并本地部署 Highlight.js？

为了提升访问速度，建议使用 官网定制构建功能，只选择你需要支持的语言，然后部署到 WordPress 本地。

步骤如下：

1. 访问官网构建页面：https://highlightjs.org/download/
2. 在“Custom build”界面中，勾选你需要支持的语言（如 HTML、PHP、JavaScript、Bash）
3. 选择一个你喜欢的主题（如 atom-one-dark）
4. 点击“Download”按钮，下载压缩包
5. 解压后将以下文件上传到你主题目录：

/your-theme/
├── js/highlight.min.js
└── css/atom-one-dark.css

如果你找不到“HTML”语言选项，只需勾选“XML”，Highlight.js 会自动将其用于 HTML 代码高亮。

三、引入脚本和样式到 WordPress

在你的主题的 functions.php 文件中添加以下代码：

function add_highlightjs_assets() {
    wp_enqueue_style(
        'highlight-css',
        get_template_directory_uri() . '/css/atom-one-dark.css'
    );
    wp_enqueue_script(
        'highlight-js',
        get_template_directory_uri() . '/js/highlight.min.js',
        array(),
        null,
        true
    );
    wp_add_inline_script('highlight-js', 'hljs.highlightAll();');
}
add_action('wp_enqueue_scripts', 'add_highlightjs_assets');

这段代码会在前端页面加载 Highlight.js 的样式和脚本，并初始化代码高亮功能。

四、如何在文章中插入代码？

你只需在文章内容中使用如下格式插入代码块即可：

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

支持的常用语言标识包括：

Highlight.js 会根据你打包时包含的语言模块进行高亮显示。

五、是否可以删除 languages 文件夹？

在下载的压缩包中，可能包含一个 languages/ 文件夹，里面是每种语言的独立语法模块。

是否可以删除？答案是：可以！

如果你在官网构建时已勾选好语言，并生成了包含它们的 highlight.min.js 文件，languages/ 文件夹就可以删除，节省空间也更整洁。

六、如何选择主题风格？

Highlight.js 提供了几十种主题，以下是推荐：

🌙 深色背景网站：

• atom-one-dark（推荐）
• monokai
• dracula

☀️ 浅色背景网站：

• github（推荐）
• atom-one-light
• xcode

只需将对应的 .css 文件引入即可更换主题。

七、结语

通过本地部署 Highlight.js，你可以轻松在 WordPress 中实现漂亮、高性能的代码高亮效果，无需依赖 CDN，不仅加载更快，也更安全。只需几步设置，即可让你的代码展示更专业、更易读。

如果你在使用过程中遇到语言标识、主题切换或构建配置问题，欢迎留言交流！

如需转载本文，请注明出处。
你也可以关注本站获取更多 WordPress 前端优化技巧和插件开发实战内容。