WordPress通过纯代码方式手动实现代码文章文本高亮效果教程

WordPress站长会发现其自身代码高亮功能并不显著,WordPress有此类插件可以增强其代码高亮功能,
但插件毕竟占空间,对网站响应速度、安全性或多或少会有一点影响。
WordPress通过纯代码方式手动实现代码文章文本高亮效果教程
下面给大家分享直接通过代码修改实现代码高亮效果

Prismjs就可以让我们的wordpress不用装插件就完成代码高亮的功能,Prismjs是一个专门做代码高亮的开源项目,
他的代码特点是精约、轻盈、快捷、高效、快速,而且支持127种程序语言的代码高亮。
最主要的是Prismjs只需一个JS文件和一个CSS文件。使用Prismjs来完成代码高亮的时分,只需下载该文件放到网站,然后将这两个文件引进到页面上就可以了。

1、首先下载prism压缩包上传至主题根目录;
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] );
    }

1. 全库网所有资源均来源于用户上传和网络,如有侵权请发送邮箱联系站长处理!
2. 如果你有好的资源或者原创教程,可以到审核区投稿发布,分享会有钻石奖励和额外收入!
3. 全库网所有的源码、教程等其它资源均源于用户上传发布,如有疑问,可直接联系发布作者处理
4. 如有链接无法下载、失效或广告,请联系全库网管理员核实处理!
5. 通过发布原创教学视频或优质源码资源可以免费获得全库网站内SVIP会员噢
6.全库网管理猿邮箱地址:admin@qkuser.com,我们会在收到您的邮件后三个工作日内完成处理!
7. 如遇到加密压缩包,默认解压密码为"qkuser.com",如遇到无法解压的请联系管理员!

全库网 » WordPress通过纯代码方式手动实现代码文章文本高亮效果教程
禁止此类操作!