とあるYouTuber編集担当の日記

YouTubeで活動を始めた編集担当です.動画制作に関する知識もほとんどない状態ではじめたのですが,活動の軌跡をせっかくなので綴っていこうとブログも解説してみました

はてなブログでMathJaxをアレンジする.

はてなブログでMathJaxをアレンジする.

はじめに

はてなブログでは数式を書くことができます.今は,MathJaxというJavaScriptのパッケージでレンダリングをしているようなので,多少の重たさはあるのですが,かなり綺麗に様々な数式をLaTeXライクに記述することができるようになっています.

\displaystyle f(x) = \int_0^1 (x + t)f(t) dt

こんな感じですね.ただし,いくつか問題があります.例えば,日本語をこの中に導入したとき,手元のMacではかなり不快感のあるフォントになってしまいます.

 \fbox{1}\ 次の問題に答えなさい.

インライン数式も用いることができません.解決策はいくつかあるようで,MathJaxを自分で環境導入するというものが存在するようなのですが,せっかくデフォルトで入っているものを改めて導入するのは不思議な感じがするので,今回はデフォルトのMathJaxである程度自由に好きなことができるようにしてみたという記事をまとめていきたいと思います.参考にしていただけますと幸いです.

 

 経緯

まずは,MathJaxがレンダラーになったというはてなブログ公式ブログでの記事です.

staff.hatenablog.com

 結構古くのことだったんですね!

この記事の中で正式にMathJaxが導入されている旨が記されています.

さて,それに対して様々な不満が上がっていました.

例えば,

  1. インライン数式が効かないという話
  2. 編集(みたまま)の方式で&による行揃えができないという話
  3. 数式が折り返されないので,スマホからみたときに表記が崩れてしまうという話
  4. 日本語が気持ち悪いフォントになってしまう話

などですね.私は,4月から教育系として数学YouTuberになっていこうとしているわけですが,その中でブログを活用すべく,こちらに記事をまとめています.

(現在は全て非公開です2019-03-31まで)

www.caponata-math.com

様々な数式を入力したいし,日本語も必要だし,スマホ化(レスポンシブ)もしたいわけです.しかしながら,先述の問題に頭を痛めていました.

 

MathJaxのConfigを書き直せばいい

実は,全般的にMathJaxの設定を記述し直すことができるのです.

docs.mathjax.org

要はこのConfigさえ弄ることができれば対処の仕様があるわけです.

ちなむと,

MathJax_config_file

的な感じのconfigを作ってあげれば,やりたいことはだいたいできたわけです.

 

どこに書くか.

これが最後の難関でした.といえど,選択肢は限られています.

<head>要素,<body>要素の,「本文の上・下・ヘッダー部・フッター部」ぐらいしかありえないわけです.このconfigはどうも,MathJaxを呼び出す前に記述しておく必要があるようなので,今回は<head>要素に突っ込んでみました.

これが功を奏したようで,今回やりたかったことを概ねクリアすることができました.

 

方法だけ知りたい!

上のソースコードを,

設定 → 詳細設定 → headに要素を追加

の中の適当なところに貼り付けてあげてください.

僕の環境はこれでうまくいきました.

他にも,MathJax自体のextensionsを導入してみようと思うので,その際にはまた記事にしてみたいなと思います.

 

やり残したこと.

レスポンシブ化として,スマホで折り返し表示はされるようになったのですが,期待したところで折り返されずに見えない部分が出てきてしまいます.これをどうやって直そうかと考えているところですが,あとはCSSを多少いじってあげればなんとかなる気がしているので,公開開始までもう少しの間粘ってみたいと思います.