html prism.js 代码前端高亮、代码美化

Prism 官网

• https://prismjs.com/

Django CKeditor Prism 插件下载

• 官方下载：http://download.ckeditor.com/prism/releases/prism_1.0.1.zip
• 百度云：https://pan.baidu.com/s/1HregPZYmnEsb7Ye5wZ7vaQ  密码:1l6l

Django Ckeditor 配置文档

      * https://blog.csdn.net/qq_38504396/article/details/79835475 *

1. 先下载 Django CKeditor Prism
2. 解压到 ckeditor/static/ckeditor/ckeditor/plugins 路径下
3. 在 settings 的 CKEDITOR_CONFIGS 里的 extraPlugins 对应的 value 里加入插件 'prism' 和 另外两个插件："lineutils"、"widget"（这两个插件无须下载，在 django-ckeditor 中已经有了）

# 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 标签，再选择代码语言，不选择代码语言默认黑白框 *

1.  去 prismjs 官网下载 css 和 js 文件：选择你喜欢的主题，勾选支持的语言，以及选择 Line Highlight、Line Numbers、Copy to Clipboard Button 功能，下载后把 css 和 js 放在static 对应的目录下
2. 前端引入两个 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' %}">