使用 python-markdown-math 渲染 markdown 时出现问题

Problems rendering markdown with python-markdown-math

我正在尝试弄清楚如何以与 Math StackExchange 站点类似的方式呈现降价语法。我希望它使用 python 库而不是任何类型的命令行工具。

经过大量研究,我发现 markdown and python-markdown-math,所以我决定和他们一起去。要同时使用它们,我刚刚安装了它们:

也就是说,让我们从分析数学堆栈交换网站生成的输出的一个小例子开始:

现在,让我们尝试使用 markdownpython-markdown-math 库来获得类似的结果:

import textwrap
import markdown
from pathlib import Path

src = """\
Rendered result of `$a+b$` ==> $a+b$

Rendered result of `$$a+b$$` ==> $$a+b$$
"""

md = markdown.Markdown(
    extensions=['mdx_math'],
    extension_configs={
        'mdx-math': {'enable_dollar_delimiter': True}
    }
)
html = """\
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>MathJax example</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js">
    </script>
</head>
<body>
{}
</body>
</html>
""".format(md.convert(src))

Path('test.html').write_text(html)

如果我们 运行 该片段然后打开生成的 test.html 我们将看到呈现的 html 将是:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>MathJax example</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js">
    </script>
</head>
<body>
<p>Rendered result of <code>$a+b$</code> ==&gt; $a+b$</p>
<p>Rendered result of <code>$$a+b$$</code> ==&gt; <script type="math/tex; mode=display">a+b</script>
</p>
</body>
</html>

看起来像这样:

如您所见,结果与我想要的有很大不同,所以我的问题是,如何获得正确的渲染 html(如数学堆栈交换站点)?

正如我在评论中所说,您使用的库是一个瘦包装器,可将 Markdown 转换为与 MathJax JS-library.

兼容的格式

如果您对在客户端执行的最终渲染没有问题,那么您需要在页面中加载和配置 MathJax。您需要阅读 MathJax here and here 文档中的配置详细信息。使您的示例对我有用的一些(非最小)配置是:

<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML-full"></script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [["$", "$"], ["\\(", "\\)"]],
            displayMath: [["$$", "$$"], ["\[", "\]"]],
            processEscapes: true
        },
        config: ["MMLorHTML.js"],
        jax: ["input/TeX", "output/HTML-CSS", "output/NativeMML"],
        extensions: ["MathMenu.js", "MathZoom.js"]
    });
</script>

这可能是一个错误的配置,只是一个例子。我强烈建议您阅读实际文档并决定如何根据您的情况正确配置它。

如果你想做完整的服务器端渲染,MathJax 声称它可以在 NodeJS 下 运行 但我没有尝试过。