提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

JSHTML前端代码 美化 高亮 prism
2023-06-13 09:18:39 时间

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

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

相关文章