MarkdownでTex数式をSVGに変換する(Pandoc+MathJax+Python Selenium)

はじめに

Markdown中のTex数式は、Webサイトによってサポートされていなかったり、
方言があったりします。
また、JavaScriptのTex数式変換ツールであるMathJaxがありますが、
レンダリングが遅いという問題があります。
そこで、Tex数式をMathJaxを使い事前にSVG画像に変換することで、
汎用的かつ高速なレンダリングを目指します。

環境構築

https://yu00.hatenablog.com/entry/2022/07/07/133441

方針

以下のようなPython Pandoc filterを作成します。

Markdownの中からMath要素だけを抜き出す
Math要素テキストだけを書き出したMathJax記法の
テンポラリHTMLファイルを作成
SeleniumでテンポラリHTMLファイルを開きMathJaxでコンパイル
コンパイルしたSVG Math要素を取得
PandocのMath要素をSVG要素に変換

ソース

import panflute as pf
import chromedriver_binary
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from string import Template
import os

class MathConverter:
    TMP_HTML_FILE_NAME = os.path.abspath('tmp.html')
    "テンポラリHTMLファイル名"

    MATH_JAX_CNFIG = '''{
        "tex2jax":{
            "inlineMath":[["$","$"]],
            "displayMath":[["$$","$$"]]
        },
    }'''
    "MathJax 設定"

    MATH_JAX_CDN_URL = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_SVG'
    "MathJax CDN URL"

    SELENIUM_WAIT_TIME = 5
    "Seleniumで要素検索の最大待ち時間"

    MATH_CLASS_NAME = 'my-math-class'
    MATH_JAX_END_CLASS_NAME = 'math-jax-end'
    class MathElemId:
        """Pandoc JSON ASTとSVGのMath要素対応付けのためのID"""
        def __init__(self):
            self._id = 0
        def get(self):
            return f'my-math-id-{self._id}'
        def __iadd__(self, b):
            self._id += b
            return self

    def __init__(self):
        self._math_elems = [] 
        "Pandoc JSON ASTのMath要素"
        
        self._svg_math_htmls = {}
        "dict[MathElemId, svg_html]"

        self._svg_src_html = ''
        "SVGソースHTML"

        self._pf_id_to_math_elem_id = {}
        "dict[id(pf.Math), MathElemId]"

        self._math_elem_id = self.MathElemId()

    def prepare(self, doc):
        doc.walk(self._collect_pandoc_math_elems)
        self._create_tmp_html_file()
        self._compile_tmp_html_to_svg()

    def action(self, elem, doc):        
        if isinstance(elem, pf.Para):
            # Math要素が<p>の子かつDisplayMathの場合は<p>ごと<svg>に書き換え
            if len(elem.content) == 1 and isinstance(elem.content[0], pf.Math) and elem.content[0].format=='DisplayMath':
                return self._convert_pandoc_math_to_svg(elem.content[0])
        elif isinstance(elem, pf.Math):
            if not isinstance(elem.parent, pf.Para) or elem.format!='DisplayMath':
                # <span> or plain <div>
                return self._convert_pandoc_math_to_svg(elem)

    def finalize(self, doc):
        # SVGソースをbodyの最初に追加
        doc.content.insert(0, pf.RawBlock(f'<div hidden>{self._svg_src_html}</div>', 'html'))

    def _collect_pandoc_math_elems(self, elem, doc):
        """
        Pandoc JSON ASTからMath要素だけを抜き出す
        """
        if isinstance(elem, pf.Math):
            self._math_elems += [{'text':elem.text, 'format':elem.format, 'id':self._math_elem_id.get()}]
            self._pf_id_to_math_elem_id[id(elem)] = self._math_elem_id.get()
            self._math_elem_id += 1

    def _create_tmp_html_file(self):
        """
        Math要素テキストだけを書き出したMathJax記法のテンポラリHTMLファイルを作成
        """

        # StartupHook : MathJaxコンパイルが終了した時にdiv要素を作成する関数を登録
        html_template = Template('''<html><head>
        <meta charset="utf-8">
        <script type="text/x-mathjax-config">
        MathJax.Hub.Config($math_jax_config)
        MathJax.Hub.Register.StartupHook("End",function () {
            const elem = document.createElement('div');
            elem.className = '$math_jax_end_class_name';
            document.body.prepend(elem);
        });
        </script>
        <script type="text/javascript" id="MathJax-script" async src="$cdn_url"></script>
        </head>
        <body>$body</body>
        </body></html>''')

        # Math要素テキストを「$」と「div」で囲った文字列を作成
        body = ''
        for math_elem in self._math_elems:
            math_delim = '$$' if math_elem['format'] == 'DisplayMath' else '$'
            body += f'<div class="{self.MATH_CLASS_NAME}" id="{math_elem["id"]}" format="{math_elem["format"]}">{math_delim}{math_elem["text"]}{math_delim}</div>'
        
        # HTML書き出し
        with open(self.TMP_HTML_FILE_NAME, 'w', encoding='utf-8') as f:
            f.write(html_template.substitute(
                body=body, 
                cdn_url=self.MATH_JAX_CDN_URL, 
                math_jax_config=self.MATH_JAX_CNFIG,
                math_jax_end_class_name=self.MATH_JAX_END_CLASS_NAME
                ))

    def _compile_tmp_html_to_svg(self):
        """
        テンポラリHTMLファイルを開きコンパイル済みのSVG Math要素を取得
        """

        options = Options()
        options.add_argument('--headless')
        driver = webdriver.Chrome(options=options)
        driver.implicitly_wait(self.SELENIUM_WAIT_TIME)

        # テンポラリHTMLファイルを開く
        driver.get('file:///'+self.TMP_HTML_FILE_NAME.replace('\\', '/'))
        # MathJaxのコンパイル終了待ち
        x = driver.find_element_by_class_name(self.MATH_JAX_END_CLASS_NAME)
        assert x, 'Error MathJax is not End'
        
        # bodyの最初にあるSVGのソースを取得
        self._svg_src_html = driver.find_element_by_tag_name('svg').get_attribute('outerHTML')
        
        # 各SVG Math要素を取得
        elems = driver.find_elements_by_class_name(self.MATH_CLASS_NAME)
        for elem in elems:
            tag = 'div' if elem.get_attribute('format')=='DisplayMath' else 'span'
            svg_math_html = elem.find_element_by_tag_name('svg').get_attribute('outerHTML')
            math_elem_id = elem.get_attribute('id')
            self._svg_math_htmls[math_elem_id] = f'<{tag} class="{self.MATH_CLASS_NAME}" id="{math_elem_id}">{svg_math_html}</{tag}>'

    def _convert_pandoc_math_to_svg(self, math_elem):
        """
        Pandoc JSON ASTのMath要素をSVG要素に変換
        """
        svg_math_html = self._svg_math_htmls[self._pf_id_to_math_elem_id[id(math_elem)]]
        if math_elem.format=='DisplayMath':
            ret = pf.RawBlock(svg_math_html, 'html')
        else:
            ret = pf.RawInline(svg_math_html, 'html')
        return ret

x = MathConverter()
pf.run_filter(x.action, prepare=x.prepare, finalize=x.finalize)

サンプル

以下のようなマークダウンを作成します。

$$
\newcommand{\mat}[1]{\begin{bmatrix}#1\end{bmatrix}}
$$

$$
\boldsymbol{E} = \mat{1 & 0 & 0\\ 0 & 1 & 0\\ 0 & 0 & 1}
$$

+ $\boldsymbol{E}$ : 単位行列

MarkdownからHTMLに変換

以下コマンドを実行します。
pandoc -s src.md -o dst.html --filter filter.py

実行結果

: 単位行列

MarkdownからMarkdownに変換

以下コマンドを実行します。

pandoc -s src.md -o dst.md --to=markdown-raw_attribute --wrap=none --filter filter.py