代码之家 › 专栏 › 技术社区 › BPL

使用python markdown math呈现markdown时出现问题

mathjax markdown math python

BPL · 技术社区 · 5 年前

我正在尝试找出如何以类似于MathStackExchange站点的方式呈现降价语法。我想用Python库来代替任何命令行工具。

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

pip install markdown
pip install python-markdown-math

也就是说,让我们先分析一下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站点)?

1 回复 | 直到 5 年前

SergGr 5 年前

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

如果您对客户端上执行的最终渲染和实际情况一样满意,那么您需要在页面中加载和配置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下运行,但我没有尝试过。