使用 python-markdown-math 渲染 markdown 时出现问题
Problems rendering markdown with python-markdown-math
我正在尝试弄清楚如何以与 Math StackExchange 站点类似的方式呈现降价语法。我希望它使用 python 库而不是任何类型的命令行工具。
经过大量研究,我发现 markdown and python-markdown-math,所以我决定和他们一起去。要同时使用它们,我刚刚安装了它们:
pip install markdown
pip install python-markdown-math
也就是说,让我们从分析数学堆栈交换网站生成的输出的一个小例子开始:
现在,让我们尝试使用 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> ==> $a+b$</p>
<p>Rendered result of <code>$$a+b$$</code> ==> <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 下 运行 但我没有尝试过。
我正在尝试弄清楚如何以与 Math StackExchange 站点类似的方式呈现降价语法。我希望它使用 python 库而不是任何类型的命令行工具。
经过大量研究,我发现 markdown and python-markdown-math,所以我决定和他们一起去。要同时使用它们,我刚刚安装了它们:
pip install markdown
pip install python-markdown-math
也就是说,让我们从分析数学堆栈交换网站生成的输出的一个小例子开始:
现在,让我们尝试使用 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> ==> $a+b$</p>
<p>Rendered result of <code>$$a+b$$</code> ==> <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 下 运行 但我没有尝试过。