回到顶部

CONTENTS

html prism.js 前端代码高亮

Prism 官网

Django CKeditor Prism 插件下载

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 HighlightLine NumbersCopy 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' %}">

     


^_^
请喝咖啡 ×

前一篇: windows 任何应用在 运行 里直接打开
下一篇: window + apache + django + mod_wsgi 一直响应中的解决办法