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

html zhuoyuebiji -- 2019-11-3 17:09 other

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 *

先下载 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' %}">

文章部分资料可能来源于网络，如有侵权请告知删除。谢谢！

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

Mmmms 2020/4/26 12:38 安徽·淮南 #4

class Messages(models.Model):
    content = RichTextUploadingField(verbose_name='正文')
    reply_id = models.IntegerField(default=-1, verbose_name='回复')
    send_time = models.DateTimeField(auto_now_add=True, verbose_name='发表时间')

    def __str__(self):
        return "留言id：" + str(self.id)

    class Meta:
        verbose_name = '留言'
        verbose_name_plural = verbose_name

Joyo 2019/12/1 0:13 广东·深圳 #3

Re: <#2> 踩坑：在代码块<pre>内加入<code>标签并指定语言才会显示样式，例如：<pre><code class="language-python"> import requests </code></pre>

没指定语言就是黑白咯🤣

Catfish 2019/12/1 0:11 中国·湖北 #2

踩坑：在代码块<pre>内加入<code>标签并指定语言才会显示样式，例如：

<pre><code class="language-python"> import requests </code></pre>

Catfish 2019/11/30 22:54 中国·湖北 #1

踩坑：发现后端富文本插件消失。

原因：提取那个文件后把带版本号的文件夹丢进去了

解决：应该放入里面的那个带版本号文件夹里面的不带版本号的文件夹。

试试点击楼层回复吧

阅读目录

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

Prism 官网

Django CKeditor Prism 插件下载

Django Ckeditor 配置文档

前端高亮代码配置

公告

可能想看

浏览历史

关于作者

联系作者