如何在Wagtail 5.0站点中安装draft-js-prism插件？

一、准备依赖文件（无需npm，直接用CDN/本地静态文件） #

draft-js-prism依赖Prism.js和Draft.js，直接通过CDN引入即可，不用npm安装：

• Prism.js：代码高亮核心库
• Draft.js：Draftail编辑器底层依赖
• draft-js-prism：Draft.js代码高亮插件

二、在Wagtail模板中引入依赖 #

找到项目的基础模板（比如base.html），在</body>标签前添加以下代码：

<!-- Prism 样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css">
<!-- Prism 核心脚本 -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<!-- Draft.js 核心脚本 -->
<script src="https://cdn.jsdelivr.net/npm/draft-js@0.11.7/dist/Draft.min.js"></script>
<!-- draft-js-prism 插件脚本 -->
<script src="https://cdn.jsdelivr.net/npm/draft-js-prism@1.0.6/dist/draft-js-prism.min.js"></script>

如果不想用CDN，可将这些文件下载到项目static目录，用Django的{% static %}标签引入。

三、创建自定义代码高亮Block #

在你的Django应用下新建/修改blocks.py，添加自定义Block：

from wagtail import blocks

class CodeHighlightBlock(blocks.StructBlock):
    # 可选的代码语言列表，可根据Prism支持的语言扩展
    language = blocks.ChoiceBlock(
        choices=[
            ('python', 'Python'),
            ('javascript', 'JavaScript'),
            ('html', 'HTML'),
            ('css', 'CSS'),
            ('bash', 'Bash'),
        ],
        label="代码语言"
    )
    code = blocks.TextBlock(label="代码内容", help_text="直接粘贴代码即可，无需转义")

    class Meta:
        icon = 'code'  # 后台显示的图标
        template = 'blocks/code_highlight_block.html'  # 渲染用的模板路径

接着创建对应的模板文件templates/blocks/code_highlight_block.html：

<div class="code-highlight-wrapper">
    <pre><code class="language-{{ self.language }}">{{ self.code }}</code></pre>
</div>

<script>
// 触发Prism对当前代码块的高亮渲染
Prism.highlightElement(document.querySelector('.language-{{ self.language }}'));
</script>

四、给Draftail编辑器添加代码块按钮 #

在应用下新建wagtail_hooks.py，注册编辑器功能：

from wagtail import hooks

@hooks.register('register_rich_text_features')
def register_code_highlight_feature(features):
    feature_name = 'code_highlight'
    # 注册Draftail编辑器插件
    features.register_editor_plugin(
        'draftail',
        feature_name,
        {
            'type': 'code-block',
            'label': '💻',  # 编辑器里显示的按钮图标/文字
            'description': '插入代码高亮块',
            'block_type': '你的应用名.CodeHighlightBlock',  # 替换成实际应用名
        }
    )
    # 将该功能加入默认编辑器功能列表
    features.default_features.append(feature_name)

之后在你的Page模型中，确保RichTextField包含这个功能：

from wagtail.models import Page
from wagtail.fields import RichTextField
from wagtail.admin.panels import FieldPanel

class BlogPage(Page):
    body = RichTextField(features=['code_highlight', 'bold', 'italic', 'link'])

    content_panels = Page.content_panels + [
        FieldPanel('body'),
    ]

五、测试使用 #

启动Wagtail服务器，进入后台编辑页面，在Draftail编辑器工具栏就能看到代码块按钮。点击后选择语言、输入代码，保存页面即可看到前端高亮的代码块。

内容的提问来源于stack exchange，提问作者coredumperror