Проблемы рендеринга уценки с помощью python-markdown-math - PullRequest
Новая
       40

Проблемы рендеринга уценки с помощью python-markdown-math

0 голосов
/ 26 января 2019

Я пытаюсь понять, как отображать синтаксис уценки аналогично сайту Math StackExchange.Я хочу, чтобы это делалось с библиотекой python вместо какого-либо инструмента командной строки.

После долгих исследований я обнаружил markdown и python-markdown-math , поэтому я решил пойти с ними.Чтобы использовать оба, я только что установил их как:

  • pip install markdown
  • pip install python-markdown-math

Тем не менее, давайте начнем с небольшого анализаПример вывода, сгенерированного сайтом обмена стека математики:

enter image description here

А теперь давайте попробуем достичь аналогичного результата, используя 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>

, который выглядит следующим образом:

enter image description here

Как видите, результат довольно сильно отличается от того, что я хотел бы получить, поэтому мой вопрос в том, как получить правильный рендерингhtml (например, сайт обмена стеками по математике)?

1 Ответ

0 голосов
/ 26 января 2019

Как я уже говорил в комментариях, используемая вами библиотека представляет собой тонкую оболочку, которая преобразует Markdown в формат, совместимый с JS-библиотекой MathJax .

Если вы в порядке с окончательным рендерингомвыполняется на стороне клиента, как SO на самом деле, вам нужно загрузить и настроить MathJax на вашей странице.Вам необходимо прочитать подробности конфигурации в документации MathJax здесь и здесь .Некоторая (не минимальная) конфигурация, которая заставила ваш пример работать для меня: 

<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, но у меня нетне пробовал это.

...