Django-CKeditor代码高亮

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

1. 参考配置参数，调出代码按钮

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"],
        ],
        "toolbar": "Full",
        "height": 500,
        "width": 860,
        "filebrowserWindowWidth": 940,
        "filebrowserWindowHeight": 725,
        'extraPlugins': 'codesnippet',
        'tabSpaces': 4,
        'allowedContent': True,
        # 配置后台语法高亮主题
        'codeSnippet_theme': 'monokai',
        # 配置后台显示支持语言，格式：{语言标识: 显示名称}
        'codeSnippet_languages': {
            'bash': 'Bash',
            'css': 'CSS',
            'html': 'HTML',
            'ini': 'INI',
            'javascript': 'JavaScript',
            'json': 'JSON',
            'nginx': 'Nginx',
            'python': 'Python',
            'sql': 'SQL',
        },
    }
}

2. 前台使用

<!-- django-ckeditor 自带的highlight版本比较低，推荐用highlightjs官网最新的js  -->
<!-- 喜欢的高亮主题 -->
<link href="{% static 'blog/css/atom-one-dark.min.css' %}" rel="stylesheet">
<!-- highlight.js文件 -->
<script src="{% static 'blog/js/highlight.min.js' %}"></script>
<!-- 调用highlight -->
<script>hljs.highlightAll();</script>

3. 补充

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

.hljs {
    border-radius: 0.5rem; # 代码框圆角
    white-space: pre-wrap; # 代码超长自动换行
}