您现在的位置是：首页 > WordPress教程WordPress教程

WordPress怎么添加代码高亮？

WP集市 2025-08-21 【WordPress教程】 1284人已围观

写技术博客的铁子们都知道，代码块要是没高亮，那叫一个费劲——黑底白字堆一块儿，变量、函数、注释全混着，读者看着眼晕，自己写完都不想回头看。今天就手把手教你，WordPress里给代码加高亮，甭管你是纯小白还是略懂点技术，跟着走保准会！

第一步：挑个趁手的插件（新手首选，不用写代码！）

咱先说最简单的办法——用插件。WordPress这生态，啥功能都有插件给你兜底，代码高亮也不例外。常用的插件有俩：SyntaxHighlighter Evolved 和 Code Snippets，但论简单粗暴，还得是 SyntaxHighlighter Evolved（后面简称“S插件”）。

咋装呢？你进WordPress后台，左边栏找“插件”→“安装插件”，搜“SyntaxHighlighter Evolved”，点“现在安装”，完事儿点“激活”。哎对了，激活后别急着关页面，插件这东西，激活了才算真正能用，不然等于白下载。

第二步：插件配置？不用瞎折腾，默认就够用！

激活完S插件，你去“设置”里找它的配置页（一般叫“SyntaxHighlighter”），里面能调高亮主题（黑底白字、白底黑字啥的）、要不要显示行号、字体大小… 新手的话，啥都不用改，默认的“Default”主题就挺好，行号勾上“显示”，看着清楚。

你猜怎么着？这插件牛就牛在“自动识别”——你写文章时插代码，它能认出是PHP还是JavaScript，自动给关键词上色，省老事儿了。

第三步：写文章时插代码，3秒出效果！

重点来了，咋在文章里用？打开编辑器（不管是古腾堡还是经典编辑器），写技术文时肯定要插代码吧？这时候你点一下编辑器顶部的“添加区块”（古腾堡是个“+”号），搜“SyntaxHighlighter Code”，选这个区块。

然后选语言（比如PHP、Python、HTML），把你的代码粘贴进去，点“发布”就完事儿！举个例子，你要插一段JavaScript代码：

function sayHello() {
  console.log("Hello, WordPress!");
}
sayHello();

你把这段代码粘贴到插件区块里，选“JavaScript”语言，发布后网页上就会显示带高亮的代码块——关键词function变蓝，字符串"Hello, WordPress!"变绿，一目了然，爽不爽？

嫌插件太多拖速度？试试“手动挡”（进阶玩法）

话说回来，要是你网站插件已经堆成山，怕再加插件拖慢速度，也能不用插件，自己用代码实现。这就得用 Prism.js 或 Highlight.js 这类轻量库，说白了就是“自己加载高亮样式和脚本”。

步骤也简单：

去 Prism.js官网下载核心JS和CSS文件（选个喜欢的主题，比如“Monokai”）；
把下载的文件上传到你WordPress主题的“js”和“css”文件夹里（用FTP或者后台“媒体库”上传都行）；
打开你主题的 header.php 文件（在“外观”→“主题文件编辑器”里找），在 <head> 标签里加一行引入CSS：
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/prism.css">
再在 footer.php 的 </body> 前加一行引入JS：
<script src="<?php echo get_template_directory_uri(); ?>/js/prism.js"></script>
写文章时，用 <pre><code class="beab-a870-f655-8021 language-javascript"> 包裹代码（class里写语言名），比如：
```
<pre><code class="f655-8021-5322-1abb language-javascript">
function sayHello() {
 console.log("Hello, WordPress!");
}
sayHello();
</code></pre>
```
保存发布，效果跟插件一模一样，还轻量！