WordPress免插件利用纯代码实现高亮

2023-08-13 0 1,027

WordPress免插件利用纯代码实现高亮

代码简介:

WordPress 博客网站有很多代码高亮,但是 WordPress 自带的代码高亮显示效果不够好。今天,汇站将分享一个不需要插件的代码高亮显示方法。使用 Prismjs,我们可以在 WordPress 中实现代码高亮显示。Prismjs 是一个开源项目,专注于代码高亮显示。它的功能强大、轻量、快速、高效,并支持 127 种编程语言的代码高亮显示。最重要的是,Prismjs 只需要一个 JS 文件和一个 CSS 文件。使用 Prismjs 实现代码高亮显示非常简单,只需下载文件并将其放在网站上,然后在页面中引入这两个文件。下面是实现代码高亮显示的步骤:

1. 首先,下载 Prism 压缩包并将其上传到主题的根目录。
2. 然后,将以下代码复制并添加到主题的functions.php文件中。


//Wordpress 免插件实现代码高亮
//Prism.js 开始
function add_prism() {
wp_register_style(
'prismCSS',
get_stylesheet_directory_uri() . '/prism/prism.css' //自定义路径
);
wp_register_script(
'prismJS',
get_stylesheet_directory_uri() . '/prism/prism.js' //自定义路径
);
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');
//Prism.js 结束
//编辑器添加快捷键
function appthemes_add_quicktags() {
?>  tags' );
//添加快捷键结束
//Pre 标签内的 HTML 不转义
add_filter( 'the_content', 'pre_content_filter', 0 );
function pre_content_filter( $content ) {
return preg_replace_callback( '|【pre.*】【code.*】(.*)【/code】【/pre】|isU' , 'convert_pre_entities', $content );
}//修改此段【】为<>
function convert_pre_entities( $matches ) {
return str_replace( $matches[1], htmlentities( $matches[1] ), $matches[0] );
}
收藏 (0)

微信扫一扫

支付宝扫一扫

点赞 (0)

免责声明

本资源仅限个人学习与研究使用,严禁用于任何商业用途!

1 网站名称:汇站网
2 永久网址:https://www.huizhanii.com
3 本站资源来源于网友投稿和付费购买,仅供编程人员及源代码爱好者下载参考与研究,不提供任何技术支持服务!
4 资源展示图片及相关信息仅供参考,不代表本站立场!本站仅作为信息存储平台
5 禁止在服务器和虚拟机上搭建运营,所有资源仅限本地调试与研究使用,不支持联网运行!
6 未经版权方授权,严禁用于商业用途。使用者如违反国家法律法规,需自行承担全部法律责任!
7 请在下载后24小时内删除!建议支持正版授权作品
8 如资源侵犯您的合法权益,请提供版权证明及相关作品信息发送至邮箱:972908224@qq.com,我们将及时处理
9 如遇下载链接失效或支付未到账,请联系站长处理
10 欢迎投稿优质源码或教程,审核通过后将获得相应奖励
11 资源收费仅用于维持网站正常运营
12 数字商品具有特殊性质,一经购买概不退款

汇站网 WordPress教程 WordPress免插件利用纯代码实现高亮 https://www.huizhanii.com/32870.html

站长资源下载中心-找源码上汇站

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

联系官方客服

为您解决烦忧 - 24小时在线 专业服务