CODEWITHSUNDEEP
pythonmathmarkdownmathjax
BPL
BPL

Reputation: 9863

Problems rendering markdown with python-markdown-math

I'm trying to figure out how to render markdown syntax in a similar way than Math StackExchange site. I want it to do with a python library instead of any sort of command line tool.

After a lot of researching I've found markdown and python-markdown-math, so I've decided to go with them. To use both I've just installed them like:

That said, let's start by analizing a little example of the output generated by the math stackexchange site:

enter image description here

And now, let's try to achieve a similar result using markdown and python-markdown-math libraries:

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)

If we run that snippet and then open the generated test.html we'll see the rendered html will be:

<!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>

which looks like this:

enter image description here

As you can see the result is pretty much different than what I'd like to get, so my question is, how do I get a correct rendered html (like math stackexchange site)?

Upvotes: 2

Views: 2103

Answers (1)

SergGr
SergGr

Reputation: 23788

As I said in comments the library you use is a thin wrapper that converts Markdown into a format compatible with the MathJax JS-library.

If you are OK with the final rendering performed on the client-side as the SO really does, you need to load and configure the MathJax in your page. You need to read details of the configuration in the documentation of the MathJax here and here. Some (non-minimal) configuration that made your example work for me is:

<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>

It is probably a bad configuration, just an example. I strongly recommend you to read the actual documentation and decide how to properly configure it for your case.

If you want to do full server-side rendering, MathJax claims that it can be run under the NodeJS but I haven't tried that.

Upvotes: 3

Related Questions