如何让Pagedown同时预览Markdown与MathJax内容？

我太懂你这个头疼的问题了——输入时Markdown格式正常显示但数学公式死活不渲染，停手后公式终于出来了，Markdown格式却凭空消失。本质上这是Pagedown的Markdown渲染和MathJax的公式渲染顺序冲突，再加上你之前的代码跳过了Pagedown核心的Markdown转换步骤导致的。下面是基于你提到的思路的具体落地实现，一步步帮你搞定：

问题根源拆解 #

你之前的代码直接把原始输入文本塞到预览div里：输入时Pagedown可能在后台悄悄做了Markdown渲染，但你没触发MathJax，所以公式不显示；停止输入后你调用了MathJax，但此时预览里的内容是未经过Pagedown处理的原始文本，自然没有Markdown格式。我们需要让两者按正确顺序协作：先让Pagedown完成Markdown渲染，再处理MathJax，同时要避免Markdown解析破坏MathJax的语法。

具体实现代码 #

核心思路是：先把文本中的数学公式临时替换成占位符，让Pagedown安全渲染剩下的Markdown内容，之后再把公式插回去，最后调用MathJax渲染：

MathJax.Hub.Config({ 
    tex2jax: { 
        inlineMath: [['$', '$'], ["\\(", "\\)"]],
        processEscapes: true
    } 
});

var timeout;
// 暂存数学公式的缓存对象
var mathCache = {};
// 生成唯一占位符的计数器
var mathCounter = 0;

$(function () {
    // 获取Django-pagedown默认初始化的Markdown转换器
    var converter = Markdown.getSanitizingConverter();

    // 提取文本中的数学公式，用占位符替换
    function extractMath(text) {
        // 匹配块级公式（$$...$$）
        text = text.replace(/\$\$(.*?)\$\$/g, function(match, formula) {
            var key = 'MATH_BLOCK_' + mathCounter++;
            mathCache[key] = formula;
            return '{' + key + '}';
        });
        // 匹配行内公式（$...$ 和 \(...\)）
        text = text.replace(/\$(.*?)\$/g, function(match, formula) {
            var key = 'MATH_INLINE_' + mathCounter++;
            mathCache[key] = formula;
            return '{' + key + '}';
        });
        text = text.replace(/\\\((.*?)\\\)/g, function(match, formula) {
            var key = 'MATH_INLINE_' + mathCounter++;
            mathCache[key] = formula;
            return '{' + key + '}';
        });
        return text;
    }

    // 把HTML中的占位符换回原始数学公式
    function restoreMath(html) {
        return html.replace(/\{(MATH_.+?)\}/g, function(match, key) {
            // 块级公式要换回$$包裹，行级用$包裹
            return mathCache[key] ? (key.includes('BLOCK') ? '$$' + mathCache[key] + '$$' : '$' + mathCache[key] + '$') : match;
        });
    }

    function makePreview() {
        // 每次更新预览前清空缓存和计数器
        mathCache = {};
        mathCounter = 0;

        var rawInput = $('#id_content').val();
        // 1. 提取公式，替换为占位符（避免Markdown解析破坏公式）
        var textWithPlaceholders = extractMath(rawInput);
        // 2. 用Pagedown转换器把带占位符的文本渲染成Markdown格式的HTML
        var markdownHtml = converter.makeHtml(textWithPlaceholders);
        // 3. 把占位符换回原始数学公式
        var finalHtml = restoreMath(markdownHtml);
        // 4. 更新预览div内容
        $('#id_content_wmd_preview').html(finalHtml);
        // 5. 触发MathJax渲染指定的预览区域
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, "id_content_wmd_preview"]);
    }

    // 输入防抖：避免频繁触发预览更新
    $('body').keyup(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }
        timeout = setTimeout(makePreview, 400);
    });

    // 监听自定义更新事件，手动触发预览刷新
    $('body').bind('updated', function () {
        makePreview();
    });
});

关键代码说明 #

• extractMath函数：把文本中的行内/块级数学公式提取到缓存，用唯一占位符替换，防止Markdown解析器把公式里的下划线、星号等字符当成格式标记处理。
• converter.makeHtml：这是你之前代码缺失的核心步骤——调用Pagedown自带的转换器，把处理后的文本转换成带Markdown格式的HTML。
• restoreMath函数：把渲染后的HTML里的占位符换回原始公式，保证MathJax能正确识别并渲染。
• MathJax定向渲染：指定预览div的ID让MathJax只渲染这个区域，比全局渲染更高效。

这样调整后，输入时防抖触发预览更新，先完成Markdown渲染再恢复公式并触发MathJax，就能同时看到正确的Markdown格式和渲染后的数学公式了。

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