TumblrにMathJaxを導入してみる!
TumblrにMathJaxを導入できたら、記事の幅広がるのでは!と思ってちょっと調べてみました。ということで、今回はTumblrにMathJaxを導入する方法について簡単にまとめていこうかなって思います。
導入方法
晴れて令和元年から社会人になることができて、結論ファーストで言うことの大切さを学んだので、とりあえ導入方法を最初に載せときます。 (補足情報は導入方法以降に記載しておくので、気になったら参考程度に。。といいつつあんま書くことなかった。笑)
👇導入方法の流れはこんな感じ👇
TumblrのHTML編集画面を開く
JavaScriptを導入する
保存して完了!
一つずつ詳しく書いてきます。
1. TumblrのHTML編集画面を開く
Step1 Tumblrページに移動してログイン ※ スマホorタブレット使ってる人で、Tumblrアプリ入れちゃってるよって人は、長押しとかして新規タブで開くとかにするとブラウザで開けるよん
Step2 アカウントのアイコンから外観を編集をクリック
Step3 テーマの編集をクリック
Step4 HTMLを編集 >をクリックするとHTMLっぽいコードが出てくる! ↓ HTMLっぽいコード(Tumblr独自のコード) このコード部分をいじるとサイトのUIも変更できる!自分でこだわって作り込めるのもTumblrのいいとこ👏
2. JavaScriptを導入する
JavaScriptの追加は👇みたいな感じにするのが一般的。かな?
<head> 追加したいJavaScriptを記述 ... </head>
ってことで、さっき開いた画面のコード部分から<head>と</head>で囲まれた箇所を見つけてみる。 見つけられたら以下を参考にして追記。
<head> ... ... ... <!-- 👇👇👇 ここから 👇👇👇 --> <script type="text/x-mathjax-config"> MathJax.Hub.Config({ extensions: ["tex2jax.js"], jax: ["input/TeX", "output/HTML-CSS"], tex2jax: { inlineMath: [[ '$','$']], displayMath: [['$$','$$']], processEscapes: true }, "HTML-CSS": { availableFonts: ["TeX"] } }); </script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js"></script> <!-- 👆👆👆 ここまで追記 👆👆👆 --> </head>
3. 保存して完了!
保存ボタンを押して完了!記事を作成してMathJaxを入力→非公開で保存。リンクをコピーして新規タブでコピーしたURLを開くと、数式が表示できてるはず! ※ Tumblr上のページでは変更されてないけど、自分のドメインページに行くと変わってる
やりたいことができた瞬間の感動って素晴らしいよね〜。(笑) 一応、自分が愛用しているMathJax記法のURL載せときます。 👉 https://easy-copy-mathjax.nakaken88.com/
MathJaxとは?
簡単に言うと、ブラウザ上で数式を扱うための記法。だと思う。。 詳しく知りたい人は、MathJaxのホームページを見てください。(英語むずかしい。。。)
MathJaxのバージョン
今使ってるやつは、バージョン2.7.1っぽいので、最新の3をインストールするにはMathJaxのホームページから。。 それと、JavaScriptの参照の仕方も公式だと更新されてるみたいなので、そのうちこの方法だと使えなくなるかも。。?
参考
https://webapps.stackexchange.com/questions/11904/adding-mathjax-to-tumblr










