yumetodoの旅とプログラミングとかの記録

旅や登山の記録やプログラミング関連の話とかフリーソフト紹介とか

このブログにもKatexが来た

$$S _ {\text{chunk}}(n)=\Bigl( \frac{2n+2}{4} \Bigr) ^ 2$$

$$D _ {\text{ore}}(n)=\Bigl( \frac{16 \cdot 4 \cdot 8}{16 \cdot 16 \cdot 12} \Bigr) \times d \times c \times S _ {\text{chunk}}(n)$$

$$D _ { \text{get}}(n)=l \times D _ {\text{ore}}(n)$$

$\mathrm{Mg}^{2+}$/$\mathrm{Ca}^ {2+}$依存の DNase I family

みたいな数式が書けるようになった。

<link rel="prefetch" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/fonts/KaTeX_Math-Italic.woff2">
<link rel="prefetch" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/fonts/KaTeX_Main-Regular.woff2">
<link rel="prefetch" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/fonts/KaTeX_Size2-Regular.woff2">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css" integrity="sha384-9eLZqc9ds8eNjO3TmqPeYcDj8n+Qfa4nuSiGYa6DjLNcv9BtN69ZIulL9+8CqC9Y" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.js" integrity="sha384-K3vbOmF2BtaVai+Qk37uypf7VrgBubhQreNQe9aGsz9lB63dIFiQVlJbr92dw2Lx" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/contrib/auto-render.min.js" integrity="sha384-kmZOZB5ObwgQnS/DuDg6TScgOiWWBiVt0plIRkZCmE6rDZGrEOQeHM5PcHi+nyqe" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/microtip/microtip.css">
<script defer src="https://cdn.jsdelivr.net/gh/john-doherty/long-press@1.0.2/dist/long-press.min.js" integrity="sha384-KStdKoqyzrHMWSdq2HkajgYuueBIz000UjPzkOWvLVSc8fYJLKPp2aph8l2onLMO" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css">

を追記してさらに

use jquery-ui when touch device

を追記することで実現した。katexを適用するためのScriptは基本的には

7shi.hateblo.jp

7shi.hateblo.jp

からお借りしたが、今どきforをindex baseで回すコードが嫌という宗教上の理由で若干書き換えている。

またtextareaを追加するのもだるいなぁと思ったので古き良きalertを利用することに。最初はクリップボードに直接書き込んでやりたかったけどpermission APIがなくて断念。スマートフォンなどのタッチデバイスでは、古き良きalertだとテキストが選択できないのでjquer-uiのを利用。jquery-uiについては

developer.hateblo.jp

数式にツールチップつけるのにmicrotipというやつを利用することにした。CSSだけでできるのか・・・。

github.com

あとlong-press eventが欲しかったので

github.com

も使っている。ただしスマートフォンなどのタッチデバイスでは、これはうまくいかないので二回タップしたら発火するようにしている。