この記事のまとめ
- Bloggerで使用する数式記述用のライブラリをテンプレートのHTMLに追加する
背景
前回記載したとおりですが、今回は数式をBloggerで表示させるための方法を記載いたします。
ちなみに私自身あまり詳しいことは知らないことがあるので、詳細な説明は省きます。
MathJaxをBloggerのテンプレートHTMLに追加する
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というものであります。
MathJaxはBloggerのテンプレートの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のセットアップが終わりました。
今回は以上です。
最後まで読んでいただきありがとうございました。
← 気に入っていただければ応援ポチをお願いします！
コメントを投稿