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; # 代码超长自动换行 }
