本文首发于：
大部分技术型博客都有使用代码高亮，以便于访客能过更好的看清所写的代码，但往往很多时候，所使用的代码高亮插件总是与主题、插件冲突，本站之前也使用过代码高亮插件，发现其在前端的编辑器上不兼容，会报错。因此，寻觅之下，发现了prism.js这个代码高亮的实现方法。
本期将在WordPress实现该操作，需要实现的功能为：在需要代码高亮的时候，它亮，不需要的时候不加载。
prism.js本身支持多平台，并不局限与WordPress，理论上，它支持所有程序。
Prism.js简介
Prism实现的原理是通过css实现样式的修正以及通过JS来实现功能，因此任何支持js，css的平台都可以使用prism来实现代码高亮。
同时需要注意的是，prism所使用的js和css都是根据自己需要定制的，不会产生多余的代码，这使得其文件大小大多只有几KB，完全不会对网络造成影响。
操作方法
Prism的操作很简单，总结来说就是：下载所需的js，css文件，然后将其引入wordpress即可。
第一步 选择所需的功能和样式
前往：https://prismjs.com/download.html
选择你要的样式和功能
如图，你可以在右侧点选你想要的代码高亮颜色，总共有8种可以选，点击选中之后，你可以滑动屏幕到最下面，看到你所选择的外观样式。
查看你选中的代码高亮样式
通常来说，代码高亮最受欢迎的是黑色，看个人喜欢选择：
黑色风格代码高亮
第二步 所需要支持的语言选择
在这里，prism默认为你选中的只有：
默认支持的语言
但你可以勾选更多，需要什么勾选什么即可。比如php，Java，Go等等，如果觉得没有你需要的语言，你可以滑动到最开始地方，找到这个选项：
选择开发版本将会出现所有prism支持的语言类型。
大部分情况下，我们都是选择Minified version【缩小版】，功能上并无差异。
第三步 选择功能插件
这里有许许多多的各种功能可以添加进你显示的代码上，比如，一键复制黏贴你的代码、高亮你代码中的关键词、显示行号、显示下划线等等。
所有功能
注意：平台是英文的，浏览器自动翻译也许不准确，下图做了一些所使用多的功能注释。
通常我们只需要这些
第四步 下载js和css文件
选择完我们需要的功能和样式后，我们就可以将这些样式文件下载了。准备进行引入。
下载Js和CSS
第五步 WP引入prism代码高亮
1、将下载好的js和css文件传到主题目录下
使用了子主题的，上传到子主题目录即可。没有使用子主题的，上传到使用的主题目录下即可
上传到子主题目录
上传完成后，我们还需要在子主题/主题的function.php中写上引入代码，这里有两种方式。
2、function.php写入代码
两种显示效果，一种是全站都加载代码高亮，一种是只对有固定标签包括的代码进行代码高亮渲染。
方式1 在网站的每个页面都加载代码高亮：
方式2 仅在具有代码标签的文章上有条件地加载代码高亮
如若转载，请注明出处：https://www.ozabc.com/jianzhan/532212.html