背景
ソフトウェアエンジニアとして活動する中で、個人の備忘録をかねてBloggerで技術メモを作成することにした。記事内で数式を扱う場合があるため、Bloggerの記事で数式を表示する方法を調査した。
記事の目的
Bloggerの記事で数式を表示する
MathJax
ここでは、技術メモ内における数式の作成方法について記載する。
技術メモでは、基本的にMathJaxで数式の作成を行う。
選定理由
MathJaxの選定理由は、下記の通りである。- Tex形式で数式を記述できる
- ブログ記事内に直接数式を記述することで、数式が自動生成される
導入方法
MathJaxの導入手順は、下記の通りである。- Blogger管理画面を開く
- 「テーマ」 を選び、 「HTMLの編集」をクリックする
- 下記Javascriptコードを、html内の<head>...</head>に貼り付ける
<!-- MathJax -->
<script
src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js'
type='text/javascript'>
MathJax.Hub.Config({
HTML: ['input/TeX','output/HTML-CSS'],
TeX: { extensions: ['AMSmath.js','AMSsymbols.js'],
equationNumbers: { autoNumber: 'AMS' } },
extensions: ['tex2jax.js'],
jax: ['input/TeX','output/HTML-CSS'],
tex2jax: { inlineMath: [ ['$','$'], ['\\(','\\)'] ],
displayMath: [ ['$$','$$'], ['\\[','\\]'] ],
processEscapes: true },
'HTML-CSS': { availableFonts: ['TeX'],
linebreaks: { automatic: true } }
});
</script>
<!-- /MathJax -->使用方法
MathJaxの使用方法は、下記の通りである。- インライン表示の場合
インライン表示: $e^{i\pi}=-1$
$$\sum_{i=1}^{n}i = \frac{1}{2}n(n+1)$$
備考
- MathJaxのJavascriptコードURL:(https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js)は将来的に変更される可能性がある。有効なURLはMathJaxのGetting Startに記載されている。
- Broggerのテーマによっては、数式が表示されない。現状動作確認しているのは、「シンプル」のみである。
- BroggerのテーマのHTMLを編集する際、「"」(ダブルクオート)を使用すると、文字化けし、正しく動作しない場合がある。
まとめ
- 技術メモ作成にあたり、Bloggerに数式を表示させる方法を記述した
- MathJaxは、htmlの<head>...</head>間に、該当Javascriptコードを記入することで使用可能である
参考文献
変更履歴
- 2019/08/15: 新規作成
0 件のコメント:
コメントを投稿