雑記:はてなブログで化学分野の式を表示する方法とか

このカテゴリーは記事として書くには情報が少ないなぁっていう小ネタをまとめて書いておくために作られました。話題は色々です。

目次

滝本カットイン

jQueryの勉強で滝本カットインを作りました(ついでに描いた絵も活かせる)。

文字列を画像に挿入するスクリプト

もちろん一から作れるわけもなく、以下のページで公開されているスクリプトを専ら参考にしました。

画像に文字を合成するシンプルなプラグイン

これを使えば任意の画像に空欄を作って、そこに自由な文字を大喜利感覚で入れて共有して楽しめるので面白そうです。

今後の改良ポイントは

  • 生成した画像を保存するボタンを作る
  • 入力した文字列をボックスの幅に収まるように自動調整させる
  • トゥートして共有する機能を付ける

ですが結構大変そうなのでのんびりやります。

GitHubで自分専用のページを作る

滝本カットインが公開されているページは「GitHub Pages」という機能を使っています。

GitHubを使って3分でHPを公開する。

GitHubのmasterブランチをWebページとして公開する手順(GitHub Pages)

サーバーを借りなくても無料で自分のページを簡単に作成できるのですごく便利です。

ちなみに僕のページはこちら

はてなTeX記法

はてなブログTeX記法が使えることを知ったのでテンションが上がっています。

はてなブログで数式が綺麗に書けるTeXの便利ワザ for 見たままモード

このブログのテーマだとこんな感じに見えます。

\begin{align}
\delta \int_{t_1}^{t_2} Ldt = 0
\end{align}

じゃあ化学分野の式もいけるよね?ってことで

\begin{gather}
\ce{Mg(OH)2}\\ \\
\ce{CrO4^2-}\\ \\
\ce{^{239}_{94}Pu}\\ \\
\ce{N2 + 3H2 <=> 2NH3}\\ \\
\ce{Ag+ + Cl- -> AgCl v}\\ \\
\ce{CH3CH=CH2}\\ \\
\ce{H2PO4- <=>C[OH-][H+] H+ + HPO4^2-}\\
\end{gather}

これは以下のサイトを参考にしました。

MathJaxの使い方〈化学編〉

はてなブログで化学分野の式を書く方法は調べても出てこなかったので少し苦労しましたが、以下のコードを記事の冒頭で書いておけば、あとは\ce{~}のように書くことで先程の反応式などを表示することができます(どこかに[tex: ]を書いておく必要があります)。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
    inlineMath: [ ['$','$'], ['\\(','\\)'] ],
    processEscapes: true
  },
  TeX: {
    extensions: ["mhchem.js"]
  },
  CommonHTML: {
    matchFontHeight: false
  }
});
</script> 

なおベンゼン環を含んだ式やその他諸々の複雑な図式を書くのはかなり大変そうだったので割愛しました。その内TeXの練習も兼ねて数式まみれの記事とか書いてみたいです(誰も読まない)。

とまあ、何のまとまりもありませんが以上です。

最後まで読んでいただきありがとうございました。