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

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

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

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

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

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

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

3、将prism.js和prism.css文件上传到当前主题文件内的js文件夹，然后在主题文件header.php中按照下图所示添加相应的代码。

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

4、为经典编辑器添加相应的语言高亮按钮，将相应代码添加到当前主题的functions.php文件中，具体如下图所示：

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

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

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

您可能感兴趣的文章

• WPS表格如何设置重复数据高亮显示？如何快速删除重复数据？
• Nana主题和Blogs主题代码自动高亮及使用教程
• WPS表格如何设置禁止录入重复数据？怎样拒绝录入重复项？
• Nana主题和WordPress版本Blogs主题小升级公告
• Nana主题升级到3.1版本 修复Debug 模式错误
• Nana主题升级到2.05版本 增加图片布局等功能
• Nana主题升级到1.02 完善友情链接页面
• WordPress免费清新两栏响应式主题NewUnite
• 如何手动升级WordPress到最新版本/还原到旧版本
• 如何生成微信支付二维码？如何设置微信支付打赏？

文章标签：标签大全 ,  WordPress ,  WordPress技巧
版权声明：本文为原创文章，版权归 boke112联盟 所有，欢迎分享本文，转载请保留出处！发布此文是出于传递更多信息之目的，若有来源标注错误或侵犯了您的合法权益，请与老古（QQ：2226524923）联系，老古将及时更正、删除，谢谢。

主机推荐：建站推荐使用云服务器 华为云或 腾讯云，免备案虚拟主机推荐 老薛主机或 BlueHost