WordPress站点如何使用Prism实现代码高亮并可一键复制代码

WordPress站点如何使用Prism实现代码高亮并可一键复制代码？
经常有站长反馈说boke112百科的代码无法复制，还要人工逐个打字，今天才知道原来使用Prism实现代码高亮并且还可以一键复制代码，下面boke112百科就跟大家说一说WordPress如何Prism实现代码高亮并可一键复制代码，具体操作如下：

1、前往Prism官网下载页面，根据实际需求勾选主题样式、支持的语言和功能插件。

1.1 选择Themes（主题样式），可点击右侧的按钮切换不用样式，在该页面最下方可看到实际高亮效果。

WordPress站点如何使用Prism实现代码高亮并可一键复制代码？ – 第1张 – 懿古今(http://www.duch.top/)

1.2 勾选支持的语言，建议勾选上PHP、SQL之类的语言。

WordPress站点如何使用Prism实现代码高亮并可一键复制代码？ – 第2张 – 懿古今(http://www.duch.top/)

1.3 勾选功能插件，如想显示行号就勾选Line Numbers，想显示代码是什么语言就勾选Show Languages，想要实现一键复制代码则勾选Copy to Clipboard Button。

WordPress站点如何使用Prism实现代码高亮并可一键复制代码？ – 第3张 – 懿古今(http://www.duch.top/)

2、选择好相应的主题样式、支持的语言和功能插件后可以在下方看到对应的文件大小。然后点击【DOWNLOAD JS】按钮下载prism.js文件，点击【DOWNLOAD CSS】按钮下载prism.css文件。

WordPress站点如何使用Prism实现代码高亮并可一键复制代码？ – 第4张 – 懿古今(http://www.duch.top/)

3、将prism.js和prism.css文件上传到当前主题文件内的js文件夹，然后在主题文件header.php中添加以下的代码：

PHP
具体如下图所示：

WordPress站点如何使用Prism实现代码高亮并可一键复制代码？ – 第5张 – 懿古今(http://www.duch.top/)

特别说明：其实可以将prism.css文件的代码添加到我们主题的style.css文件中，将prism.js添加到主题文件footer.php的之前。

4、为经典编辑器添加相应的语言高亮按钮，将以下代码添加到当前主题的functions.php文件最后一个?>的前面：

// 添加代码高亮按钮
add_action(‘after_wp_tiny_mce’, ‘yigujin_tiny_mce’);
function yigujin_tiny_mce($mce_settings) {
?>

PHP
具体如下图所示：

WordPress站点如何使用Prism实现代码高亮并可一键复制代码？ – 第6张 – 懿古今(http://www.duch.top/)

5、编辑文章中的代码高亮时，切换到文本模式，如添加PHP代码，则点击一下【PHP】按钮，然后添加PHP代码，在点击一下【/PHP】按钮，最后发表文章即可实现代码高亮。

WordPress站点如何使用Prism实现代码高亮并可一键复制代码？ – 第7张 – 懿古今(http://www.duch.top/)

同理，添加其他HTML、CSS、JavaScript、SQL等语言的操作是一样的。

另外，据说使用古腾堡编辑器的话添加高亮代码更加简单，具体如何操作就有待各位站长自行挖掘了，因为boke112百科一直习惯使用经典编辑器。