芋の独り言

当ブログへのアクセスは当ブログのプライバシーポリシーに同意したものとみなします.

数式の挿入の仕方

はてなブログMarkdown記法を使用していること前提で話をしてます
これの前に投稿した記事で初めて数式を挿入してみたわけだが,はてなブログでの数式の挿入は,Qiitaとは少し違うようなんだよなぁ~ とはいえ,演算記号とかは同じといっていいと思うので, qiita.com
をタイトル通りに,チートシートとして使って問題なさそう.ただ,
” ```math ``` ”や”$$”で囲むのは,はてなブログでは認識しないようなので,

[tex:数式]

とすれば,いいと思う. の前後に改行を入れないと,埋め込みとして認識されるっぽいので,数式だけの行として 独立させたいなら,改行を入れとくのが無難かな~
そんなわけで,以下に参考サイト↓

HTMLをいじるとか,何とかあるけど,そこら辺は分からんのでパスしますね~

追記

以上の書き方だと,数式だと認識されないことがありましたので,

<pre>[tex:
数式\\
数式\\
・・・
]</pre>

とした方がよさそうです...前後に<pre>タグを入れておくという感じですね.

参考

追記:はてなブログでの数式挿入の仕方

kusoimox.hatenablog.jp kusoimox.hatenablog.jp でお馴染みのはてなブログの設定からデザイン設定のヘッダとcssに追記して数式の表示を変更しようというわけですが, 参考[1]の通りにMathjaxを読み込むようにデザイン設定に追記しましょう. Mathjaxをヘッダから読み込むようにしたら,参考[1]のように, 数式を挿入することができます.

とはいえ,以上の方法でも上手く認識されずに数式が上手く表示されないこともあるかと思うので,そのときは[tex: ]で数式を挿入するのですが, これでは真ん中に数式が表示されないので,

<div align="center">
[tex:
数式
]
</div>

とします.しかし,これではまだ不充分. 何が不十分なのかと言うと,以上では数式が長い時にブログをはみ出す形になります.
なので,スクロールバーを付けるように,また,はてなブログの設定→デザイン設定から, CSSに参考[4]のような内容を追記します.

div.scroll{
    border: solid 2px orange;
    background: lemonchiffon;
    width: 360px;
    height: 120px;
    padding: 10px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    overflow: scroll;
}

参考[4]のほぼまんまです.これをcssに追記した上で,

<div align="center" class="scroll">
[tex:
数式\\
\sum_{a=1}^{n}
]
</div>

とすれば,以下のようになります.


数式\\
\sum_{a=1}^{n}

また,上記で\sumの上下に数値が表示させたい場合,

<div align="center" class="scroll">[tex:
\displaystyle 数式\\
\displaystyle \sum_{a=1}^{n}
]</div>

とします.数式の直前に\displaystyleを挿入します.


\displaystyle 数式\\
\displaystyle \sum_{a=1}^{n}

また,

<div align="center" class="scroll">[tex:
\begin{align}
\displaystyle 数式\\
\displaystyle \sum_{a=1}^{n}a &=1+2+\cdots+n\\
&= M
\end{align}
]</div>

とすると,\displaystyleはなくても良いです.


\begin{align}
\displaystyle 数式\\
\displaystyle \sum_{a=1}^{n}a &=1+2+\cdots+n\\
&= M
\end{align}

っというように揃えることができます.

参考

  1. Mathjaxの使い方を覚えて美しい数式表示をしてみよう! - はるなぴログ
  2. はてなブログのMarkdown記法等 - tak0kadaの何でもノート
  3. スタイルシート[CSS]/ボックス/ボックスからはみ出た部分の表示方法を指定する - TAG index
  4. 【CSS】オーバーフローしたコンテンツの表示 - Qiita