WordPress使用Prism.js高亮,集成编辑器小工具

prism在前面说到过,是一款强大的高亮js,可以说比很多的高亮插件还要强大

安装Prism

首先去这里定制下载你的prism,然后丢到你的主题里,如果想用下文的小工具建议安装Line Numbers和Toolbar两个插件。

到这里你就可以体验强大的高亮功能了,高亮标签是

<pre><code class="languages-语言">代码</code></pre>

TinyMCE小工具

当然,这很麻烦,所以龙庭砚的橘子大神写了个编辑器插件,结果发现个转义bug,我修好bug后为我选的两款插件做了一些修改,修改部分如下

  • 编辑器显示换成icon图标
  • 支持上面的两款插件
  • 修复转义bug

其实转义bug很有可能是大佬的误操作,因为明明有替换代码却没有替换。。。

打开functions,丢入下面php

//添加代码插入按钮
add_action('admin_init', 'insert_code_button');
function insert_code_button(){
    if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
            return;
    }
    add_filter( 'mce_external_plugins', 'add_highlight_button_plugin' );
    add_filter( 'mce_buttons', 'register_highlight_button' );
}
function register_highlight_button( $buttons ) {
    array_push( $buttons, "|", "highlight" );
    return $buttons;
}
function add_highlight_button_plugin(){
    $plugin_array['highlight'] = get_bloginfo( 'template_url' ) . '/js/highlight.js';
    return $plugin_array;
}

在主题js文件夹里面,创建highlight.js文件,代码如下:

2018/03/24更新:开发Vmeng主题中发现蛮多BUG的,修好

(function() {

var boxStyle = '.highlighter-code-box {\
    background: #F1F1F1;\
    position: fixed;\
    left: 50% ;\
    top: 50% ;\
    border: 1px solid #999;\
    width: 460px;\
    height: 465px;\
    margin: -210px 0 0 -230px;\
    line-height: 25px;\
    border-radius: 3px 3px 0 0;\
    z-index:9999;\
}\
.highlighter-code-box-title{\
    height: 25px;\
    background: #444;\
    color: #fff;\
    text-align: center;\
    vertical-align: baseline;\
    font-family: Arial,Verdana;\
    font-size: 11px;\
    \
}\
.highlighter-code-box-toolbar{\
    padding: 5px 15px;\
}\
.highlighter-code-title{\
    width: 430px;\
    height: 30px;\
    font-family: "Courier New", Courier, mono;\
    font-size: 20px;\
    border: 1px solid #DFDFDF;\
    margin: 0 auto;\
    display: block;\
    resize: none;\
}\
.highlighter-code-ln{\
    width: 430px;\
    height: 30px;\
    font-family: "Courier New", Courier, mono;\
    font-size: 17px;\
    border: 1px;\
    margin: 0 auto;\
    display: block;\
    resize: none;\
}\
.highlighter-code-input{\
    width: 430px;\
    height: 310px;\
    font-family: "Courier New", Courier, mono;\
    font-size: 12px;\
    border: 1px solid #DFDFDF;\
    margin: 0 auto;\
    display: block;\
    resize: none;\
}\
.highlighter-code-box-bottombar{\
    text-align: right;\
    padding: 5px 15px;\
}\
.highlighter-code-box-bottombar input{\
    border: 1px solid #BBB;\
    margin: 0;\
    padding: 0 0 1px;\
    font-weight: bold;\
    font-size: 11px;\
    width: 94px;\
    height: 24px;\
    color: black;\
    cursor: pointer;\
    border-radius: 3px;\
    background-color: #EEE;\
    background-image: -ms-linear-gradient(bottom, #DDD, white);\
    background-image: -moz-linear-gradient(bottom, #DDD, white);\
    background-image: -o-linear-gradient(bottom, #DDD, white);\
    background-image: -webkit-gradient(linear, left bottom, left top, from(#DDD), to(white));\
    background-image: -webkit-linear-gradient(bottom, #DDD, white);\
    background-image: linear-gradient(bottom, #DDD, white);\
}\
.highlighter-code-box-bottombar input:hover{\
    border: 1px solid #555;\
}';

var boxTemplate = '\
<div class="highlighter-code-box-title">插入代码</div>\
<div class="highlighter-code-box-toolbar">\
    <label>语言: <select id="codeLanguage">\
</select>\
</label>\
<input id="codeTitle" class="highlighter-code-title" placeholder="输入萌萌哒的标题" > \
</div>\
<textarea id="codeInput" class="highlighter-code-input" ></textarea>\
<form name="codeLN" class="highlighter-code-ln">\
<label><input id="codeln" type="checkbox" value="显示行号" name="codeln" checked="checked"/>显示行号\
</label>\
</from>\
<div class="highlighter-code-box-bottombar">\
    <input id="codeCancelButton" type="button" value="取消">\
    <input id="codeInsertButton" type="button" value="插入">\
</div>';

var languages = {  //此处可根据不同高亮插件修改成不同的高亮标签
    Markup:     'markup',
    CSS:     'css',
    Clike:   'clike',
    JavaScript: 'javascript',
    PHP:     'php',
	ASPNET : 'aspnet',
 	Bash:  'bash',
 BASIC:  'basic',
	C:     'c',
	CSharp:  'csharp',
	CPP:     'cpp',
	Git:     'git',
	Go:     'go',
	HTTP:     'http',
	ini:     'ini',
	Java:     'java',
	JSON:     'json',	
    Nginx:  'nginx',
    ObjectiveC:  'objectivec',
    Perl:  'perl',
    PowerShell:  'powershell',
	Python:  'python',
	Ruby:  'ruby',
    SQL:  'sql',
    VBNet:'vbnet',	
    None:     'none'
}
var codeBox = {
    create: function() {
        var styleNode = document.createElement('style');
        styleNode.innerHTML = boxStyle;
        document.getElementsByTagName('head')[0].appendChild(styleNode);
        
        this._dom = document.createElement('div');
        this._dom.setAttribute('class' , 'highlighter-code-box');
        this._dom.innerHTML = boxTemplate;
        document.body.appendChild(this._dom);
        this._init = true;
        var that = this;
        var language = this.language = document.getElementById('codeLanguage');
        var codetitle = this.codetitle = document.getElementById('codeTitle');
        var textarea = this.textarea = document.getElementById('codeInput');      
        var codeln = this.textarea = document.getElementById('codeln');
        var cancel = document.getElementById('codeCancelButton');
        var insert = document.getElementById('codeInsertButton');
        var html = '';
        for(var i in languages){
            html += '<option value="' + languages[i] + '">' + i + '</option>';
        }
        language.innerHTML = html;
        cancel.onclick = function(){
            that.hide();
        }
        insert.onclick = function(){
        	   var title = codetitle.value;
            var text = textarea.value;
            var lan = language.value;
            var ln = codeln.checked;
            var label = language.options[language.selectedIndex].innerHTML;
            text = text.replace(/&/g, '&amp;');
            text=text.replace(/</g,'&lt;').replace(/>/g, '&gt;');
           if(!title){
           	if(ln){
           text = '<pre class="line-numbers"><code class="language-' + lan + '">' + text + '</code></pre>';
           }else{
           text = '<pre><code class="language-' + lan + '">' + text + '</code></pre>';
           }
           }else{
           	if(ln){
            text = '<pre class="line-numbers" data-label="'+ title +'"><code class="language-' + lan + '">' + text + '</code></pre>';
            }else{    	          
            text = '<pre data-label="'+ title +'"><code class="language-' + lan + '">' + text + '</code></pre>';
            	
            }
            }
            //上面这句也应该根据不同高亮插件修改不同class格式
            that._action && that._action(text);
            that.hide();
            if(localStorage){
                localStorage['lastLanguage'] = lan;
            }
        }
    },
    show: function(action) {
        if (!this._init) {
            this.create();
        }
        this.textarea.value = '';
        this._action = action;
        if(localStorage && localStorage['lastLanguage']){
            this.language.value = localStorage['lastLanguage'];
        }
        this._dom.style.display = 'block';
    },
    hide: function(){
        this._action = null;
        this._dom.style.display = 'none';
    }
};

tinymce.create('tinymce.plugins.highlight', {
    init : function(ed, url) {
        ed.addButton('highlight', {
            title : '代码高亮',
			icon : 'code',
            onclick : function() {
              codeBox.show(function(text){
                ed.selection.setContent(ed.selection.getContent()+text);
              });
            }
        });
    },
    createControl : function(n, cm) {
        return null;
    },
});
tinymce.PluginManager.add('highlight', tinymce.plugins.highlight);

})();

上面的语言是我选的,一般人肯定用不到这么多,我是写主题所以肯定选了很多

大概就是这样了,DOME的话因为是手机就没有啦,手机写文好不爽啊

一周年没有几天了,另外我的破文章将在6号7:45在boke112导航发布,到时候欢迎来围观本萌新,第一次投稿呢

本文代码二次开发自:纯代码部署prism代码高亮 - 龙庭砚

 

weinxin
我的微信
这是我的微信,扫一扫加我好友
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:25   其中:访客  13   博主  12

    • avatar FH云彩 1
      回复 2017年12月4日 下午8:46  沙发

      我就不创建highlight.js咋滴?

      • avatar 月宅 2
        回复 2017年12月4日 下午8:51  板凳

        我也用Highlightjs,种类风格都比较多-0-

          • avatar 狂放 博主
            回复 2017年12月4日 下午8:56  1层

            @月宅 emmm我这在讲Prism呢2333,我是一方面为了照顾MIP一方面方便明年换主题

          • avatar 月宅 2
            回复 2017年12月4日 下午8:53  地板

            你这个页面, 我输出了400多个错误

            • avatar 月宅 2
              回复 2017年12月4日 下午8:59  4楼

              你文章里面有:在主题js文件夹里面,创建highlight.js文件,代码如下:
              所以我说我也用Highlightjs → → 自己撸的文章,自己都不知道。我用的插件版

              • avatar 狂放 博主
                回复 2017年12月4日 下午9:55  5楼

                emmm,我那个highlight.js是编辑器插件,高亮js是prism.js(标题里面写着呢)

                • avatar 后宫学长 3
                  回复 2017年12月4日 下午11:27  6楼

                  哎,用的Markdown编辑器,自带Prism,还支持AJAX,实在太方便了。
                  WP的代码高亮插件找得心烦。

                  话说你的博客,上下滑动产生无数个JS报错,牛逼。

                    • avatar 狂放 博主
                      回复 2017年12月5日 下午12:33  1层

                      @后宫学长 哪来的报错,woc为毛我这没有

                        • avatar 后宫学长 3
                          回复 2017年12月5日 下午1:31  2层

                          @狂放 我想你需要用谷歌浏览器看下。
                          https://icdn-1252947837.file.myqcloud.com/wp-content/themes/begin/js/script.js?ver=2017.03.20
                          第219行’top’报错。

                        • avatar 狂放 博主
                          回复 2017年12月5日 下午12:41  1层

                          @后宫学长 话说WordPress哪来的MrakDown,连新的编辑器都还不支持,其实MarkDown挺方便的

                            • avatar 后宫学长 3
                              回复 2017年12月5日 下午1:35  2层

                              @狂放 我用的 淮城一只猫 的 WP Editor.md
                              后台可以直接下载。
                              https://iiong.com/wordpress-plugins-wp-editormd.html

                          • avatar 懿古今 4
                            回复 2017年12月5日 下午10:14  7楼

                            已经习惯使用直接把代码变成HTML代码插入文章,不过使用JS实现确实简单很多

                              • avatar 狂放 博主
                                回复 2017年12月5日 下午10:28  1层

                                @懿古今 我已经严重懒癌了,手动转换方便在换主题也没事233

                              • avatar 沈唁志 1
                                回复 2017年12月7日 下午2:56  8楼

                                牛逼牛逼 行号也有了

                                • avatar Parkmimi 3
                                  回复 2017年12月7日 下午9:33  9楼

                                  嗯 我这边console里都是script.js报错

                                    • avatar 狂放 博主
                                      回复 2017年12月7日 下午9:35  1层

                                      @Parkmimi woc真的有bug啊,不过我应该没改什么啊,怎么回事ne

                                      • avatar 狂放 博主
                                        回复 2017年12月7日 下午10:37  1层

                                        @Parkmimi 查到了 目录的问题,具体得拿到电脑研究

                                      • avatar 龙笑天 3
                                        回复 2017年12月8日 下午10:10  10楼

                                        咋不习惯贴效果图呢~ 编辑器的~

                                          • avatar 狂放 博主
                                            回复 2017年12月8日 下午10:12  1层

                                            @龙笑天 没电脑,手机截图不方便,而且我懒

                                          • avatar Colin 0
                                            回复 2018年3月31日 上午7:45  11楼

                                            蛇皮的滑动报错….

                                            • avatar Colin 0
                                              回复 2018年3月31日 上午7:47  12楼

                                              之前留错邮箱了,没头像难受。。 你这页面滑动报错还没修呐 1000多错误了 1300 了 我发现具有意思