修改帝国cms7.5 codesnippet插件生成高亮代码的风格

无意中看见有一个mac风格的高亮代码很漂亮，这无疑是装X的利器啊，就直接把别人的代码给扣过来，然后自己手段改造了

效果图

对比高亮的风格样式区别

1. codesnippet 插件生成的样式代码

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

2. Mac风格样式的代码

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

改造思路，在cmscodesnippet插件生成pres标签的位置加入css的类名，引入mac风格css代码

改造步骤

主要修改plugin.js文件，这是用来生产前端代码的插件，找到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;
}

5. 模板中引入js和css文件

<link rel="stylesheet" href="https://www.lingyublog.com/skin/highlight/mac.css"/>
<script src="https://www.lingyublog.com/skin/highlight/prism.js"></script>

关于ckeditor安装codesnippet高亮插件，查看文章《帝国cms7.5系统编辑器添加（Code Snippet）插件实现高亮代码显示》

不想自己修改的小伙伴，直接下载文件，plugin.js文件，把覆盖e/admin/ecmseditor/infoeditor/plugins/codesnippet目录下的plugin.js文件，mac.css样式文件和prism.js复制到自己的文件中，并在模板中引用文件。