如何配置wagtail-markdown以Prism替代Pygments作为语法高亮工具

完全可以实现你的需求，核心思路是禁用 Wagtail-Markdown 自带的 Pygments 高亮，同时自定义 Markdown 扩展识别语言标记并注入 Prism 所需的 class 属性，具体步骤如下：

1. 关闭 Wagtail-Markdown 的 Pygments 高亮 #

首先在项目的 settings.py 中配置，禁用默认的语法高亮功能，避免生成 Pygments 相关的冗余标签和样式：

WAGTAILMARKDOWN = {
    'HIGHLIGHT': False,
    # 保留其他原有配置项
}

2. 编写自定义 Markdown 扩展 #

创建一个 Python 文件（比如 markdown_extensions.py），实现一个扩展来识别 :::python 这类语言标记，并将语言类型转换为 Prism 要求的 language-xxx class：

from markdown.extensions import Extension
from markdown.preprocessors import Preprocessor
import re

class PrismCodeExtension(Extension):
    def extendMarkdown(self, md):
        # 注册自定义预处理器，优先级高于默认处理器
        md.preprocessors.register(PrismCodePreprocessor(md), 'prism_code', 10)

class PrismCodePreprocessor(Preprocessor):
    # 匹配 ::{lang} 和 ```{lang} 两种代码块标记
    CODE_BLOCK_RE = re.compile(
        r'^(?:```|:::)([\w-]+)\s*\n'
        r'(.*?)\n'
        r'^(?:```|:::)\s*$',
        re.MULTILINE | re.DOTALL
    )

    def run(self, lines):
        text = '\n'.join(lines)
        # 替换所有匹配的代码块
        while True:
            match = self.CODE_BLOCK_RE.search(text)
            if not match:
                break
            lang = match.group(1)
            code_content = match.group(2)
            # 生成 Prism 兼容的标签结构
            replacement = f'<pre><code class="language-{lang}">{code_content}</code></pre>'
            text = text[:match.start()] + replacement + text[match.end():]
        return text.split('\n')

3. 配置 Wagtail-Markdown 使用自定义扩展 #

回到 settings.py，将自定义扩展添加到 Wagtail-Markdown 的扩展列表中：

WAGTAILMARKDOWN = {
    'HIGHLIGHT': False,
    'EXTENSIONS': [
        'your_app_name.markdown_extensions.PrismCodeExtension',
        # 保留其他需要的 Markdown 扩展（如 tables、toc 等）
    ],
}

4. 引入 Prism 静态资源 #

将 Prism 的 CSS 和 JS 文件下载到项目的静态资源目录（如 static/css/ 和 static/js/），然后在页面模板中引入：

{% load static %}
<!-- Prism 主题样式 -->
<link rel="stylesheet" href="{% static 'css/prism-tomorrow.css' %}">
<!-- Prism 核心脚本 -->
<script src="{% static 'js/prism.min.js' %}"></script>
<!-- 按需引入对应语言的语法支持脚本 -->
<script src="{% static 'js/prism-python.min.js' %}"></script>
<script src="{% static 'js/prism-js.min.js' %}"></script>

5. 测试效果 #

在 Wagtail 的 Markdown 编辑器中输入如下内容：

:::python
def greet(name):
    return f"Hello, {name}!"
:::

生成的 HTML 会自动变为：

<pre><code class="language-python">def greet(name):
    return f"Hello, {name}!"</code></pre>

Prism 会自动识别 language-python class 并完成语法高亮渲染。

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