在WordPress网站上支持代码高亮（代码着色）

代码高亮（代码着色）就是指让代码中不同语句根据类别显示不同的颜色，从而增强可读性，而不是干巴巴一片黑色。我们可以通过Hightlight或Prism使网页支持代码高亮，在这里笔者使用了Prism

Prism，即prism.js，是一个轻量级，可扩展的语法着色工具，可以让你的代码块中的代码颜色更丰富更好看（也就是“代码高亮”）。

原代码和经Prism代码高亮的对比图如下

Prism官网
https://prismjs.com/download.html

在Prism官网上自定义你的代码着色样式：着色主题、着色插编程语言范围、插件（高亮行、显示行号、高亮关键字、链接跳转、颜色块显示、命令行风格、复制按钮）等，然后下载相应的css文件和js文件，将其放置到你的服务器上

同样在服务器上找到WordPress站点目录，如笔者的是/www/wwwroot/[站点文件名]

在目录底下找到 wp-content/themes/[WordPress使用的主题名称]/header.php

在<head>和</head>之中添加以下代码

<!--Prism show start--><link rel="stylesheet" href="http://etherealdreamfuture.com/wp-content/myPlugins/prism/prism.css" /><script type="text/javascript" src="http://etherealdreamfuture.com/wp-content/myPlugins/prism/prism.js"></script><!--此处css和js的文件路径可修改为你自己的文件存放路径--><!--Prism show end-->

完成即可支持Prism

顺带一提，不知为何在笔者WordPress网站上装有WP Githuber MD后，代码块的代码能被Prism正常高亮，但行内代码不起效。

Markdown标注行内代码
`[行内代码]`
Markdown标注代码块代码
```[代码块代码]```

笔者通过额外增添下方所示的CSS样式解决了该问题，可在WordPress自定义功能中找到“额外CSS”进行增添。

/* 标注（行内代码）高亮 */p>code{background:rgb(245,242,240);border-radius:6px;font-family:Source Sans Pro;font-weight:bold;padding:0 6px;margin:0 4px;}

效果如下

{{item.like > 0 ? item.like : '点赞'}} {{item.comment_content_show ? '取消' : '回复'}} 删除

回帖

{{reply.like > 0 ? reply.like : '点赞'}} {{reply.comment_content_show ? '取消' : '回复'}} 删除

收起