习惯使用django-ckeditor实现博客后台的富文本输入，但发现少个代码高亮功能，几经查找，发现其有内置的代码块功能：codesnippet，用此插件就可以实现代码高亮功能，且自带不少常见主题，其原理是通过highlight.js实现。

一、配置参数，调出代码按钮

# 在setting文件中添加如下参考配置
CKEDITOR_CONFIGS = {
    'default': {
         "skin": "moono-lisa",
         "toolbar_Basic": [["Source", "-", "Bold", "Italic"]],
         "toolbar_Full": [
            ["Styles", "Format", "Bold", "Italic", "Underline", "Strike"],
            ["Blockquote", "Link", "Unlink"],
            ["Image", "Table", "HorizontalRule"],
            ["NumberedList", "BulletedList", "JustifyLeft", "JustifyCenter", "JustifyRight",
            "JustifyBlock"],
            ["TextColor", "BGColor", ],
            ["CodeSnippet", "Source"], # 根据个人喜好，把codesnippet按钮放在相应位置，注意此处开头大写
        ],
        "toolbar": "Full",
        "height": 500,
        "width": 860,
        "filebrowserWindowWidth": 940,
        "filebrowserWindowHeight": 725,
        "extraPlugins": "codesnippet", # 添加codesnippet插件，注意此处开头小写
        "tabSpaces": 4,
        "allowedContent": True,
    }
}

效果如下：

二、配置默认主题

# 修改配置文件
…Libsite-packagesckeditorstaticckeditorckeditorpluginscodesnippetplugin.js

# 修改plugin.js中CKEDITOR.config.codeSnippet_theme参数为个人喜欢的主题即可
CKEDITOR.config.codeSnippet_theme="monokai_sublime";

各主题样式可以参考: https://highlightjs.org/static/demo/

三、前台配置使用

在前台页面增加相应所需的js、css文件，并初始化highlight.js

<!-- 增加相应配置 -->
<link href="{% static 'xxx/css/sunburst.css' %}" rel="stylesheet">
<script src="{% static 'xxx/js/highlight.pack.js' %}"></script>
<script>hljs.initHighlightingOnLoad();</script>

四、问题补充

部分超长代码不会自动换行问题，在.css文件中添加white-space: pre-wrap; 即可自动换行正常显示。

.hljs {
    /* 新增下面内容 */
    white-space: pre-wrap;
}