SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色

下面我来详细讲解一下使用SyntaxHighlighter配合CKEditor插件打造代码语法着色的完整攻略。

准备工作

在开始使用SyntaxHighlighter配合CKEditor插件打造代码语法着色之前，需要做一些准备工作。

下载SyntaxHighlighter

首先需要下载 SyntaxHighlighter。可以选择下载最新版本的zip文件或者使用npm安装。

引入SyntaxHighlighter文件

下载完成后，需要在页面中引入SyntaxHighlighter文件。可以复制/dist目录下的文件到项目中，然后在HTML文件中引入。

<link rel="stylesheet" href="path/to/syntaxhighlighter/styles/shCore.css" />
<script src="path/to/syntaxhighlighter/scripts/shCore.js"></script>

下载CKEditor

接着需要下载 CKEditor，同样可以选择下载最新版本的zip文件或者使用npm安装。

引入CKEditor

下载完成后，需要在页面中引入CKEditor文件。可以复制/build目录下的文件到项目中，然后在HTML文件中引入。

<script src="path/to/ckeditor/ckeditor.js"></script>

集成SyntaxHighlighter和CKEditor

准备工作完成后，可以开始使用SyntaxHighlighter配合CKEditor插件打造代码语法着色，具体步骤如下：

设置SyntaxHighlighter

首先需要在页面中初始化SyntaxHighlighter，可以通过以下代码实现：

SyntaxHighlighter.all();

这段代码会找到页面中所有含有class="brush: [language]"的<pre>标签，并对其中的代码进行着色。

编写CKEditor插件

然后需要编写一个CKEditor插件，用于插入含有SyntaxHighlighter所需要的代码块。具体步骤如下：

安装CKEditor插件生成器

首先需要安装CKEditor插件生成器。可以通过以下命令进行安装：

npm install -g @ckeditor/ckeditor5-dev

生成插件

生成插件需要指定一些参数，可参考以下样例：

$ cked g plugin syntaxhighlighter --template=default --className=SyntaxHighlighter --packageName=syntaxhighlighter
$ cd syntaxhighlighter
$ npm install

其中参数含义如下：
- plugin syntaxhighlighter：指插件名为syntaxhighlighter
- --template=default：指用默认模板（即只有一个JS文件和一个CSS文件）生成插件
- --className=SyntaxHighlighter：指定插件的类名为SyntaxHighlighter
- --packageName=syntaxhighlighter：指定该插件的包名为syntaxhighlighter

通过以上命令生成的插件包含一个js文件和一个css文件，需要将它们放到对应的目录下。

配置插件

生成插件后，需要在生成的目录下，修改./src/index.js来实现插件的功能。下面是一个插入含有SyntaxHighlighter的代码块的简单示例：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import Widget from '@ckeditor/ckeditor5-widget/src/widget';
import Command from '@ckeditor/ckeditor5-core/src/command';
import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';

const SYNTAX_HIGHLIGHTER = 'SyntaxHighlighter';

export default class SyntaxHighlighter extends Plugin {
    static get requires() {
        return [Widget];
    }

    static get pluginName() {
        return SYNTAX_HIGHLIGHTER;
    }

    init() {
        const editor = this.editor;
        const schema = editor.model.schema;

        // Register the widget and command.
        schema.register( 'syntaxHighlighter', {
            isObject: true,
            allowWhere: '$block',
            allowAttributes: ['language', 'code']
        } );

        editor.ui.components.get( 'toolbar' ).add( 'SyntaxHighlighter', {
            label: 'Insert syntax highlighter block',
            command: 'syntaxHighlighter',
            icon: 'terminal'
        } );

        editor.commands.add( 'syntaxHighlighter', new SyntaxHighlighterCommand( editor ) );

        // Allow nesting this model element in blocks and as document child.
        editor.model.schema.extend( '$block', { allowContentOf: 'syntaxHighlighter' } );
        editor.model.schema.addChildCheck((context, childDefinition) => {
            if (context.endsWith('syntaxHighlighter') && childDefinition.name == '$block') {
                return true;
            }
        });

        // Allow inserting this content by pasting it.
        editor.conversion.elementToElement({
            model: 'syntaxHighlighter',
            view: {
                name: 'pre',
                classes: 'brush: [language]'
            }
        });
    }
}

class SyntaxHighlighterCommand extends Command {
    execute(options) {
        this.editor.model.change(writer => {
            writer.insertText('[language]Type your code here[/language]', this.editor.model.document.selection.getFirstPosition());
        });
    }
}

function syntaxHighlighterToWidget() {
    return (modelItem, viewWriter) => {
        if (modelItem.name == 'syntaxHighlighter') {
            const pre = viewWriter.createContainerElement('pre', { class: 'brush: ' + modelItem.getAttribute('language') });
            const code = viewWriter.createRawElement('code', {}, modelItem.getAttribute('code') || 'Type your code here');
            viewWriter.insert(viewWriter.createPositionAt(pre, 0), code);
            return toWidget(pre, viewWriter);
        }
    };
}

export function toWidgetSyntaxHighlighter(viewElement) {
    return toWidget(viewElement, DEFAULT_WIDGET_CONFIG);
}

配置CKEditor

最后将生成的插件引入到CKEditor中，可以通过使用自定义构建来达到这个目的。具体步骤如下：

配置build-config.js

在CKEditor安装目录下，找到build-config.js文件，并在其中添加以下代码：

module.exports = {
    plugins: [
        // ... 其他自定义插件
        require('./path/to/syntaxhighlighter/src/index.js')
    ],
    // ... 其他配置
};

记得将['./path/to/syntaxhighlighter']替换成实际路径。

构建CKEditor

修改node_modules/ckeditor5-build-classic/build/ckeditor.js文件，删除以下三行：

import Alignment from '../../ckeditor5-alignment/src/alignment';
ClassicEditor.builtinPlugins.push( Alignment );

然后执行构建命令：

npm run build

执行完毕后，在./build目录下将生成一个新的构建好的CKEditor。

示例

以上就是使用SyntaxHighlighter配合CKEditor插件打造代码语法着色的详细攻略。下面是两条示例说明：

示例1

假设我们要在文章中插入一段html代码，并使用SyntaxHighlighter着色处理。首先需要在html文件中加入以下代码：

<link rel="stylesheet" href="path/to/syntaxhighlighter/styles/shCore.css" />
<script src="path/to/syntaxhighlighter/scripts/shCore.js"></script>
<script src="path/to/ckeditor/ckeditor.js"></script>
<script src="path/to/syntaxhighlighter-ckeditor-plugin.js"></script>

其中syntaxhighlighter-ckeditor-plugin.js是我们自己编写的CKEditor插件。其次，需要在适当的位置加入一个<pre>标签，不过需要加上语言的类名，可以参考以下代码：

<pre class="brush: html">
    &lt;p&gt;Hello world!&lt;/p&gt;
</pre>

最后，在CKEditor编辑器中点击插入语法高亮代码的按钮，选择HTML语言即可插入含有SyntaxHighlighter的代码块。

示例2

假设我们要在文章中插入一段Javascript代码。与示例1类似，首先需要在html文件中加入以下代码：

<link rel="stylesheet" href="path/to/syntaxhighlighter/styles/shCore.css" />
<script src="path/to/syntaxhighlighter/scripts/shCore.js"></script>
<script src="path/to/ckeditor/ckeditor.js"></script>
<script src="path/to/syntaxhighlighter-ckeditor-plugin.js"></script>

其次，需要在适当的位置加入一个<pre>标签，不过需要加上语言的类名，可以参考以下代码：

<pre class="brush: javascript">
    var a = 1;
    var b = 2;
    console.log(a + b);
</pre>

最后，在CKEditor编辑器中点击插入语法高亮代码的按钮，选择Javascript语言即可插入含有SyntaxHighlighter的代码块。