纯代码WordPress免插件实现代码高亮显示
下面是脚本之家 jb51.cc 通过网络收集整理的代码片段。脚本之家小编现在分享给大家,也给大家做个参考。 wordpress 技术博客经常会分享一些代码,但是 WordPress 本身代码高亮功用并不好。前面里维斯社分享了 2019 年 10 个最新的WordPress 代码高亮插件,今天就分享一个免插件完成代码高亮显现的办法。 Prismjs 就能够让我们的 wordpress 不用装插件就完成代码高亮的功用,Prismjs 是一个特地做代码高亮的开源项目,他的代码特性是精约、轻盈、快捷、高效、快速,而且支持 127 种程序言语的代码高亮。最主要的是 Prismjs 只需一个 JS 文件和一个 CSS 文件。运用 Prismjs 来完成代码高亮的时分,只需下载该文件放到网站,然后将这两个文件引进到页面上就能够了。下面介绍 WordPress 实现代码高亮的办法: 1、首先下载 prism 压缩包上传至主题根目录(底部下载); 2、然后复制以下代码添加到主题 function.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() { ?> <script type="text/javascript"> QTags.addButton( 'codeHighlight','代码高亮','n【pre class="line-numbers"】【code class="language-markup"】n HTML代码n【/code】【/pre】n' ); QTags.addButton( 'php','php','n【pre class="line-numbers"】【code class="language-php"】n PHP代码n【/code】【/pre】n' ); QTags.addButton( 'python','Python','n【pre class="line-numbers"】【code class="language-python"】n Python代码n【/code】【/pre】n' );//修改此段【】为<> </script> <?php } 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 ); }//修改此段【】为<> function convert_pre_entities( $matches ) { return str_replace( $matches[1],htmlentities( $matches[1] ),$matches[0] ); } 这就是纯代码 WordPress 免插件实现代码高亮显示全部内容,教程相关的文件请在此页面右侧边栏点击下载。 以上是脚本之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。 (编辑:安卓应用网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |