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

梦未

已于 2023-01-17 21:08:50 修改

阅读量4.1k

点赞数 4

分类专栏： # Web端开发文章标签： wordpress javascript

于 2021-10-26 15:36:44 首次发布

本文链接：https://blog.csdn.net/weixin_42077074/article/details/120973439

版权

Web端开发专栏收录该内容

20 篇文章 1 订阅

订阅专栏

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

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

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

🗃️附件

在 Prism 官网下载 prism.js

https://prismjs.com/download.html

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

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

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

在 <head> 和 </head> 之中添加以下代码，将代码中 href 和 src 属性的 url 更换成你自己的

<!--Prism show start-->
<link rel="stylesheet" href="http://www.aaa.com/wp-content/prism/prism.css" />
<script type="text/javascript" src="http://www.aaa.com/wp-content/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;
}