ckeditor4.22集成高度代码highlight.js

FontSize: 【小中大】

要在 CKEditor 4.22 中集成高亮代码的功能，您可以使用 Highlight.js 库来实现。以下是基本步骤：

下载 Highlight.js：https://highlightjs.org

解压缩下载的文件：

将下载的 ZIP 文件解压缩到您的项目文件夹中。

在 HTML 页面中引入 Highlight.js 的样式文件和脚本文件：

在 <head> 标签内添加以下代码引入样式文件：

<link rel="stylesheet" href="path/to/highlight.js/styles/default.css">

在页面底部的 </body> 标签前添加以下代码引入脚本文件：

<script src="path/to/highlight.js/highlight.pack.js"></script>

配置 CKEditor 4：

在CKEditor初始化时，启用Code插件和SyntaxHighlighting插件，并配置使用 Highlight.js：

CKEDITOR.replace('editor1', {
    extraPlugins: 'codesnippet',
    codeSnippet_theme: 'default',
    codeSnippet_languages: {
        javascript: 'JavaScript',
        python: 'Python'
        // 在这里添加更多语言
    },
    on: {
        instanceReady: function(ev) {
            ev.editor.dataProcessor.htmlFilter.addRules({
                elements: {
                    pre: function(el) {
                        // 移除 CKEditor 中自动插入的 <br> 标签，
                        // 这样代码块将保持原本的换行格式
                        el.children.forEach(function(child) {
                            if (child.name === 'br') {
                                child.remove();
                            }
                        });
                    }
                }
            });
        }
    }
});

这里的 path/to/highlight.js/styles/default.css 是指向 Highlight.js 的默认样式文件，而 path/to/highlight.js/highlight.pack.js 是指向 Highlight.js 的脚本文件。您需要根据实际文件路径进行设置。

在 codeSnippet_languages 配置中，您可以添加更多语言以支持代码高亮显示。