【お知らせ】プログラミング記事の投稿はQiitaに移行しました。

Markdown+Mathからはてなブログへ

数学 はてなブログ

はてなブログとVisual Studio CodeのMarkown+Mathでは数式のデリミタが異なります。Markown+Mathで下書きしてはてなブログに持って行く際のノウハウを説明します。

【2019.11.14】Replace Rulesの設定方法の変更に対応
【2018.08.03】KaTeX で専用の class を使用する方法に変更
【2018.08.02】正規表現による置換と拡張機能の紹介を追記

目次

Markown+Math

Visual Studio CodeやMarkown+Mathの導入方法は以下の記事を参照してください。

置換

Markown+Mathでは数式のデリミタ（切り替え記号）に $ ～ $ と $$ ～ $$ を使用します。はてなブログでは [tex: ～ ] だけです。

はてなブログではMarkdownパーサーが数式に干渉します。詳細は以下の記事を参照してください。

インラインの $ ～ $ は ^ と _ に注意して書くしかありませんが、$$ ～ $$ は <div> タグで囲めば回避できます。

以下の正規表現で置換すれば良いでしょう。

対象 $ ～ $
検索 \$(.+?)\$
置換 [tex:$1]
対象 $$ ～ $$
検索 \$\$([\s\S]+?)\$\$
置換 <div align="center">[tex:\displaystyle{$1}</div>

※ Visual Studio Code は行をまたいだ置換ができないようなので、後者は使えません。

拡張機能

正規表現による置換を毎回入力するのは面倒です。拡張機能で登録すれば便利です。行をまたいだ置換にも対応しています。

メニューから「ファイル → 基本設定 → 設定」を選択して settings.json を開き、以下のユーザー設定を追記します。

    "replacerules.rules": {
        "mdmath→はてなブログ(MathJax) inline": {
            "find": "\\$(.+?)\\$",
            "replace": "[tex:$1]",
        },
        "mdmath→はてなブログ(MathJax) display": {
            "find": "\\$\\$([\\s\\S]+?)\\$\\$",
            "replace": "<div align=\"center\">[tex:\\displaystyle{$1}</div>"
        },
    },

[Ctrl]+[Alt]+[R] で選択肢が表示されるので、選択して [Enter] を押せば置換されます。2つの置換を自動で行うことはできないため、inline と display を個別に選択します。

調整の例

独立した数式を連続して書く際に、くっ付き過ぎるきらいがあります。手動でマージンを指定すれば改善されます。

<div align="center">[tex:\dispaystyle{
(x+1)^2=x^2+2x+1
}]</div>
<div align="center" style="margin-top: 1em">[tex:\dispaystyle{
(x-1)^2=x^2-2x+1
}]</div>

KaTeX

【注意】はてなブログ標準の数式機能（MathJax）を使う場合、以下の説明は関係ないため無視してください。

KaTeXを導入すれば置換の手間は減ります。

上の記事の方法では $ ～ $ を置換する必要はありませんが、Markdownパーサーとはてなキーワードの干渉を回避するため $$ ～ $$ の中身を <div class="math-render"> ～ </div> で囲む置換は必要です。

対象 $$ ～ $$
検索 \$\$([\s\S]+?)\$\$
置換 <div class="math-render">$1</div>

拡張機能 Replace-Rules の設定は以下の通りです。

    "replacerules.rules": {
        "mdmath→はてなブログ(KaTeX) display": {
            "find": "\\$\\$([\\s\\S]+?)\\$\\$",
            "replace": "<div class=\"math-render\">$1</div>"
        },
    },

変換

一度 MathJax で記事を公開してから、後で KaTeX に書き換えたくなった時の置換設定を載せておきます。4つの工程に別れています。

    "replacerules.rules": {
        "MathJax→KaTeX 1 displaystyle": {
            "find": "\\\\displaystyle *",
            "replace": ""
        },
        "MathJax→KaTeX 2 display": {
            "find": "<div.*?\\[tex:([\\s\\S]+?)\\]</div>",
            "replace": "<div class=\"math-render\">$1</div>"
        },
        "MathJax→KaTeX 3 inline": {
            "find": "\\[tex:(.+?)\\]",
            "replace": "$$$1$$"
        },
        "MathJax→KaTeX 4 aligned": {
            "find": "{align.*?}",
            "replace": "{aligned}"
        },
    },