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百科一直习惯使用经典编辑器。

您可能感兴趣的文章

• boke123导航将本站使用的JianYue主题添加代码自动高亮功能
• Dragon主题设置中的“每天某段时间内的评论均自动设为待审核”怎么设置都不对？
• WordPress如何使多个字段按不同的顺序排序orderby？
• WordPress站点如何移除前端无用的CSS样式代码global-styles-inline-css
• WordPress后台媒体库上传图片会占用文章ID吗？如何上传不会？
• WordPress数据库在哪看？WordPress博客发过的文章在数据库哪里？
• Dragon主题某些缩略图出现An error occured fetching image错误怎么办？
• WordPress经典编辑器如何设置文本模式为默认打开方式？