WordPress使用ueditor集成代码语法高亮插件Prism.js

百度ueditor编辑器很久不更新了,自带的代码高亮插件很丑,刚开始用Highlight.js试了下,代码行数展示比较难搞,最后发现Prism.js真是简洁漂亮又好用,真香~!

先去官网选择自己想要的主题,自定义选择想要支持高亮的代码类型和相关插件。然后把Prism.jsPrism.css下载到网站主题目录下。

在主题js目录下新建一个ueditorconv.js文件,用来转换替换ueditor自带的代码高亮。代码如下:

// ueditorconv.js
jQuery(document).ready(function($){
(function(){
    var doc_pre = $('pre');
    doc_pre.each(function(){
        var class_val = $(this).attr('class');
        var class_arr = new Array();
        class_arr = class_val.split(';');
        class_arr = class_arr['0'].split(':');
        var lan_class = 'language-'+class_arr['1'];
        var pre_content = '<code class="'+lan_class+'">'+$(this).html()+'</code>';
        $(this).html(pre_content);
        $(this).attr("class",'line-numbers '+lan_class);
    });
})();
});

之后编辑functions.php文件,添加如下代码,加载Prism.js、Prism.css和ueditorconv.js文件。

// 引入 prism.js && prism.css
function add_prism_scripts() {
    // 如果当前访问的页面是已存在的文章页,且不在指定分类中,则引入 prism.js 包
    // -_-! 没办法,为了兼容以前有些文章代码高亮格式,不需要可以去掉排除的分类
    if (is_single() && !in_category(array(159,95,115))) {
        // Register prism.css file
        wp_register_style(
            'prismCSS', // handle name for the style
            get_template_directory_uri() .
            '/css/prism.css' // location of the prism.css file
        );
        // Register prism.js file
        wp_register_script(
            'prismJS', // handle name for the script
            get_template_directory_uri() .
            '/js/prism.js' // location of the prism.js file
        );
        wp_register_script(
            'ueditorconvJS', // handle name for the script
            get_template_directory_uri() .
            '/js/ueditorconv.js' // location of the ueditorconv.js file
        );
        // Enqueue the registered style and script files
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
        wp_enqueue_script('ueditorconvJS');
    }
}

add_action('wp_enqueue_scripts', 'add_prism_scripts');

这样就ok了,可以看到文章所示代码高亮的效果啦。WordPress使用ueditor集成代码语法高亮插件Prism.js


参考:

anzhihe安志合个人博客,版权所有丨 如未注明,均为原创 丨转载请注明转自:https://chegva.com/4630.html | ☆★★每天进步一点点,加油!★★☆

您可能还感兴趣的文章!

发表评论

电子邮件地址不会被公开。 必填项已用*标注