Question

我试图弄清楚如何以与Math StackExchange网站类似的方式呈现markdown语法。我希望它使用python库而不是任何种类的命令行工具。

经过大量研究，我发现markdown和python-markdown-math，所以我决定与它们一起使用。要同时使用它们，我已经像这样安装了它们：

pip install markdown
pip install python-markdown-math

也就是说，让我们首先分析一下数学stackexchange网站生成的输出的一个小例子：

现在，让我们尝试使用markdown和python-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（如math stackexchange网站）？

Answer 1

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

如果您可以像在SO那样真正完成在客户端执行的最终渲染，那么您需要在页面中加载和配置MathJax。您需要在MathJax here和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下运行，但是我没有尝试过。

使用python-markdown-math

1 个答案: