* https://blog.csdn.net/qq_38504396/article/details/79835475 *
# ckeditor configs
CKEDITOR_CONFIGS = {
'language': 'zh-cn',
'awesome_ckeditor': {
'toolbar': 'full',
'width': 'auto',
'height': '480px',
'tabSpaces': 4,
# 插件
# prism:代码高亮、代码行数
# uploadimage:允许用户直接在编辑器里粘贴(ctrl + v)图片
# codesnippet:添加代码块的功能
'extraPlugins': ','.join(['codesnippet', 'uploadimage', 'prism', 'widget', 'lineutils', ]),
},
}
* 内容必须是代码块,即含有 pre 标签,再选择代码语言,不选择代码语言默认黑白框 *
去 prismjs 官网下载 css 和 js 文件:选择你喜欢的主题,勾选支持的语言,以及选择 Line Highlight、Line Numbers、Copy to Clipboard Button 功能,下载后把 css 和 js 放在static 对应的目录下
前端引入两个 js 和 css
<script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
<script src="{% static 'js/prism.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/prism.css' %}">