帝国cms ckeditor代码高亮插件codesnippet mac风格主题

无意中看到别人家的博客代码高亮非常漂亮，如下图所示，Mac OS风格，查阅资料为Pure Highlightjs，是WordPress插件。



奈何咱们的博客不是WordPress程序，长叹一声~

不过还好，Pure Highlightjs是基于Highlightjs，而本博客用的编辑器是帝国cms自带的ckeditor，ckeditor的代码高亮插件codesnippet也是基于Highlightjs，嘿嘿，那么动手改造吧。

关于ckeditor安装codesnippet高亮插件网上教程很多，本篇不再赘述，小伙伴们可自行查阅资料安装。

一、对比两个插件生成的高亮html代码

1、codesnippet生成的高亮Html代码

<pre>
    <code class="language-java hljs">
    xxxxxx
    </code>
</pre>

2、mac风格主题Pure Highlightjs生成的高亮Html代码

<pre class="pure-highlightjs line-numbers  language-java">
	<code class=" language-java">
		xxxxxxxx
	</code>
</pre>

对比之下发现，Pure Highlightjs生成的高亮代码中，pre标签多了pure-highlightjs line-numbers  language-*这三个class。
 

二、动手改造

找到e/admin/ecmseditor/infoeditor/plugins/codesnippet目录下plugin.js修改

1、给template加上这三个class

template: '<pre class="pure-highlightjs line-numbers ' + codeClass + '"><code class="' + codeClass + '"></code></pre>'

2、修改 data函数，更新代码时，同时修改pre标签的language-* class

data: function() {
    var newData = this.data,
        oldData = this.oldData;

    if ( newData.code )
        this.parts.code.setHtml( CKEDITOR.tools.htmlEncode( newData.code ) );

    // Remove old .language-* class.
    if ( oldData && newData.lang != oldData.lang ) {
        var odl = oldData.lang;
        this.parts.code.removeClass( 'language-' + odl );
        //修改代码时，更新pre标签的language-* class
        this.parts.pre.removeClass( 'language-' + odl );
    }
    
    // Lang needs to be specified in order to apply formatting.
    if ( newData.lang ) {
        // Apply new .language-* class.
        var ndl = newData.lang;
        this.parts.code.addClass( 'language-' + ndl );
        //修改代码时，更新pre标签的language-* class
        this.parts.pre.addClass( 'language-' + ndl );
        this.highlight();
    }

    // Save oldData.
    this.oldData = CKEDITOR.tools.copy( newData );
}

3、修改upcast函数，提交代码时，添加pre的language-*

upcast: function( el, data ) {
    if ( el.name != 'pre' )
        return;

    var childrenArray = getNonEmptyChildren( el ),
        code;

    if ( childrenArray.length != 1 || ( code = childrenArray[ 0 ] ).name != 'code' )
        return;

    // Upcast <code> with text only: https://dev.ckeditor.com/ticket/11926#comment:4
    if ( code.children.length != 1 || code.children[ 0 ].type != CKEDITOR.NODE_TEXT )
        return;

    // Read language-* from <code> class attribute.
    var matchResult = editor._.codesnippet.langsRegex.exec( code.attributes[ 'class' ] );

    if ( matchResult )
        data.lang = matchResult[ 1 ];

    // Use textarea to decode HTML entities (https://dev.ckeditor.com/ticket/11926).
    textarea.setHtml( code.getHtml() );
    data.code = textarea.getValue();

    code.addClass( codeClass );
    //pre标签添加codeClass
    el.addClass( codeClass );
    return el;
}

4、修改downcast函数

downcast: function( el ) {
    var code = el.getFirst( 'code' );

    // Remove pretty formatting from <code>...</code>.
    code.children.length = 0;

    // Remove config#codeSnippet_codeClass.
    code.removeClass( codeClass );
    //删除pre标签codeClass
    el.removeClass( codeClass );

    // Set raw text inside <code>...</code>.
    code.add( new CKEDITOR.htmlParser.text( CKEDITOR.tools.htmlEncode( this.data.code ) ) );

    return el;
}

三、加入Pure Highlightjs的js和样式文件
涉及到的js和css文件：prism.js，mac.css，clipboard.min.js，需要的小伙伴可以直接从本博客代码中获取

Tags：帝国cms

转载：感谢您对高晓波个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源高晓波个人博客”。https://www.gaoxiaobo.com/web/html/140.html

很赞哦！ ()