WordPress免插件实现代码高亮

高亮前言:

代码高亮,简单地说就是把代码不进行翻译进行展示,展示之后显示各颜色代码,从而更好的显示代码效果,给代码加上一个 css 及 js,插件多了肿瘤,所以不如用代码实现此功能,简单 – 完美

css 及 js 调用了 Prism 开源的代码高亮的功能

css 及 js 文件

1. 在网站主题目录里面新建文件夹:prism

2.prism 文件夹内放入文件:prism.css prism.js文件

在主题文件 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() {
?>
<!--?php &lt;br ?-->
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags');
// 添加快捷键结束
//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 );
}// 修改此段【】为 &lt;&gt;
function convert_pre_entities($matches) {return str_replace( $matches[1], htmlentities($matches[1] ), $matches[0] );
}
//END
//END

使用方法

登录 wp 网站后台,编辑文章时点击右上角的文本模式,会有代码高亮 /PHP/python 等代码的按钮,点击在样式里面插入代码即可!

声明

⚠️免责声明:本站的资源均来自于用户投稿,仅为资源共享、作个人学习使用,其版权均归原作者所有。

⚠️侵权声明:如有侵权请发送邮件至:xjbqb@foxmail.com 或 点击右侧 私信:“管理员”反馈,我们将尽快处理。

⚠️转载声明:若需转载,请保留原文链接并附出处,谢谢合作。

普通下载
1
赞助下载
2

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余

给TA打赏
共{{data.count}}人
人已打赏
技术教程

wordpress如何修改数据库里用户ID下一个自增值的开始数字

2023-11-24 23:31:56

技术教程

WordPress B2主题美化一键复制+代码高亮

2023-11-25 0:17:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
我是底线可爱胖!冲鸭~