Bloggerの記事をAtom/Markdownで作成するための準備（数式編）

Bloggerの記事をAtomMarkdownで作成するための準備（表、コード編）

この記事のまとめ

Bloggerで数式を記述できるようにする。
Atomで出力したHTMLをそのままBloggerに張り付けて使えるようにする。

背景

前回記載したとおりですが、今回は数式をBloggerで表示させるための方法を記載いたします。ちなみに私自身あまり詳しいことは知らないことがあるので、詳細な説明は省きます。

Atomで数式を表示させる

Atomの標準のプレビューでは数式の記述はできませんが、markdown-preview-plus というパッケージを使用することで数式を表示させることができます。

まずはmarkdown-preview-plusをインストールします。 Fileタブ → Settings → Installの手順でInstall Packageの画面を開き、markdown-preview-plusと検索すればすぐに出てくると思いますのでそれをインストールします。

そして、既存のプレビュー生成パッケージであるmarkdown-previewを停止して、替わりにmarkdown-preview-plusを使うようにします。 Fileタブ → Settings → Packagesの手順でPackagesの画面を開き、markdown-previewを検索します。すると、既存のmarkdown-previewと先ほどインストールしたmarkdown-preview-plusが表示されるはずです。markdown-preveiwをDisableにし、markdown-preview-plusをEnableにすれば完了です。

(2018.06.05追記) 特定のバージョンのmarkdown-preview-plusをインストールする

最新版(2018.06.05現在)のmarkdown-preview-plusではHTML出力形式が変わってしまい、これから説明する方法が使えなくなってしまいましたので、古いバージョンのmarkdown-preview-plusをインストールする方法を紹介します。ちなみに、最新版では有難迷惑なことに数式をSVGとして出力できるようになっており、そのHTMLを使えばおそらく造作なく数式を表示できるようになっていますが、私の環境ではフォーマットが崩れて見栄えが悪いので使っていません。気力があれば最新版に対応できるようにします。

まずは、現在インストールされているmarkdown-preview-plusをアンインストールします。そして、Windowsの場合には、コマンドプロンプトを開き、下記のコマンドを投入することでAtomにmarkdown-preview-plus v2.5.8をインストールすることができます。

$ apm install markdown-preview-plus@2.5.8

MathJaxをBloggerに追加する

AtomエディターでMarkdown-preview-plusをプレビュー生成ライブラリとして使ったときに、Markdownで数式を表現する方法として、コード記述と同様に数式ブロックとして記載する方法と、インラインで数式を出す方法とがあります。

数式ブロックとして、Markdownで記述するとこのように$$で囲います。

$$
A=BC
$$

これをAtomでHTML出力すると下記のようになります。

<span class="math">
  <script type="math/tex; mode=display">
    A=BC
  </script>
</span>

また、インラインで数式を出力するMarkdownの記述は下記のように$で囲います。

文中の数式$a=bc$はこうなります

これをAtomでHTML出力すると下記のようになります。

<p>
  文中の数式<span class="math"><script type="math/tex">a=bc</script></span>はこうなります
</p>

このようにどちらも<span class="math"><script type="math/tex">でタグ付けされていることがわかります。
これを認識して数式に変換してくれるJavaScriptのライブラリがMathJaxというものであります。
BloggerのテーマのHTMLをカスタマイズすることでMathJaxを読み込むようにしたいと思います。 Bloggerを開きテーマ→HTMLの編集からHTMLの<head>タグ内に下記を追加します。

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX","output/HTML-CSS"],
    "HTML-CSS": {
      styles: {".MathJax_Preview": {visibility: "hidden"}}
    },
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
    TeX: {extensions: ["AMSmath.js","AMSsymbols.js","http://sonoisa.github.io/xyjax_ext/xypic.js"]}
  });
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js"></script>

これを追加してやれば完了です。

ようやくBloggerのセットアップが終わりました。

今回は以上です。
最後まで読んでいただきありがとうございました。

　← 気に入っていただければ応援ポチをお願いします！

Search This Blog