highlight.js 使用 CKEditor 代码片段

Question

我正在尝试将 highlight.js 与 CKEditor 插件一起使用 CodeSnippet。

我有 CKEditor 工作，包括 CodeSnippet 插件，但我的代码没有被检测到或没有颜色编码或缩进或任何我期望的。

正在阅读 highlight.js 它说

This will find and highlight code inside of pre code tags; it tries to detect the language automatically. If automatic detection doesn’t work for you, you can specify the language in the class attribute:

这是 JavaScript 我在 HTML 文件中调用 highlight.js:

<script src="{% static 'js/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js' %}"></script>
<script>hljs.initHighlightingOnLoad();</script>

这是我的 config.js CKEditor:

CKEDITOR.editorConfig = function( config ) {.
    config.toolbarGroups = [
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'insert', groups: [ 'codesnippet'] },
    ];


    config.removeButtons = 'Image,Flash,Table,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe';

    config.format_tags = 'p;h1;h2;h3;pre';

    config.removeDialogTabs = 'image:advanced;link:advanced';
};

Answer 1

这解决了它：

CKEDITOR_CONFIGS = {
    'default': {
        'skin': 'bootstrapck',
        'toolbar': 'Custom',
        'toolbar_Custom': [
            {'name': 'basicstyles', 'items': ['Bold', 'Italic', 'Underline', '-', 'RemoveFormat']},
            {'name': 'paragraph', 'items': ['NumberedList', 'BulletedList']},
            {'name': 'indent', 'items': ['Indent', 'Outdent']},
            {'name': 'codeSnippet', 'items': ['CodeSnippet',]}
        ],
        'codeSnippet_theme': 'school_book',
        'tabSpaces' : 4,
        'extraPlugins': ','.join(
            [
            'codesnippet',
            'widget',
            'dialog',
            ]),
    }
}

highlight.js 使用 CKEditor 代码片段

highlight.js with CKEditor codesnippet

javascript

jquery

ckeditor

highlight.js