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

boke112百科前面跟大家分享的『WordPress站点如何使用Prism实现代码高亮并可一键复制代码？』一文，就详细介绍了WordPress站点使用Prism实现代码高亮并可一键复制代码。

YIA主题自带的代码高亮效果

Prism代码高亮效果

现在boke112百科使用了YIA主题，该主题自带的代码高亮功能比较简陋，所以决定为其增加一个代码高亮并显示序号和可一键复制代码的按钮。具体操作步骤如下：

1、请根据『WordPress站点如何使用Prism实现代码高亮并可一键复制代码？』一文的操作获得prism.js和prism.css文件，然后将其上传到网站根目录的某个位置。

比如将prism.js文件上传到/wp-content/themes/yia/assets/js/文件夹内，将prism.css文件上传到/wp-content/themes/yia/assets/css/文件夹内。

2、进入WordPress站点后台 >> YIA主题设置 >> 自定义代码 >> 在“头部代码”或“底部代码”引入prism.js和prism.css文件。

<link href="https://boke112.com/wp-content/themes/yia/assets/css/prism.css" rel="stylesheet" />
<script src="https://boke112.com/wp-content/themes/yia/assets/js/prism.js"></script>

记得将上述代码中的域名修改为自己站点的域名。

或者直接在YIA主题的footer.php文件中添加以下代码：

<?php if (is_single()) { ?>
<link href="https://boke112.com/wp-content/themes/yia/assets/css/prism.css" rel="stylesheet" />
<script src="https://boke112.com/wp-content/themes/yia/assets/js/prism.js"></script>
<?php }?>

特别说明：

1、以上代码的意思就是只在文章页中加载prism.js和prism.css文件。

2、记得将上述代码中的域名修改为自己站点的域名。

另外，我们还可以将prism.js和prism.css文件的代码添加到主题自带的js文件和css文件中，这样就可以不用单独引入这两个文件了。

本文地址：https://boke112.com/post/11581.html