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

卓越笔记

发布于 2023-02-18 11:11:35

3.3K0

发布于 2023-02-18 11:11:35

文章被收录于专栏：卓越笔记

先下载 Django CKeditor Prism
解压到 ckeditor/static/ckeditor/ckeditor/plugins 路径下
在 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' %}">

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-11-3 1，如有侵权请联系 cloudcommunity@tencent.com 删除

https