moris/blogPosts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

細かい修正

Browse Source
This commit is contained in:
moris 2024-12-23 16:38:00 +09:00
parent bc83c3ef5e
commit 7a51bdc6d4
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
Posts/remark-math.md
View File

@ -34,8 +34,9 @@ e = mc^2
```
~~~
サンプルコード
## サンプルコード
```sh
npm install remark remark-rehype rehype-stringify
@ -62,28 +63,28 @@ let html = remark()
console.log(String(html))
```
Output:
### 実行結果
```html
<p><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>e</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">e=mc^2</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.4306em;"></span><span class="mord mathnormal">e</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:0.8141em;"></span><span class="mord mathnormal">m</span><span class="mord"><span class="mord mathnormal">c</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8141em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span></span></span></p>
```
実行するとhtmlが出てくるのですが、そのまま.htmlで保存してブラウザで開くと、ダブってるし片方は数式になっていません。
これだけではダメでKaTeXでは追加のCSSを適用する必要があるのです。(MathJaxではCSSが一緒に出力されるので不要)
これだけではダメで、KaTeXでは追加のCSSを適用する必要があるのです。(MathJaxではCSSが一緒に出力されるので不要)
なので以下のlinkタグを追加して再度開くと
```html
<link href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" rel="stylesheet">
```
![](https://moris.day/files/img/remark-math-e-mc2.webp)
![数式が正しく表示されている](https://moris.day/files/img/remark-math-e-mc2.webp)
数式として表示されました✨
## オプション(MathMLで出力)
KaTeXはhtml(+css)とMathMLという形式の出力に対応しています。
MathMLとは簡単にいうとSVGの数式版のようなもので、数式を記述するためのxmlマークアップです。
SVGと同様にwebブラウザで表示が可能ですが最近まではサポートが微妙だったため現時点ではMDNでもNEWLY AVAILABLEとなっています。(https://developer.mozilla.org/ja/docs/Web/MathML)
SVGと同様にwebブラウザで表示が可能ですが、最近までブラウザサポートが微妙だったため、MDNではNEWLY AVAILABLEとなっています。https://developer.mozilla.org/ja/docs/Web/MathML
KaTeXではhtmlのみを出力、MathMLのみを出力、htmlを表示してMathMLをアクセシビリティのために不可視で付ける、の3種類が選択可能で3つ目がデフォルトになっています。(ちなみにcssをつけないとダブるのはこのためです。)
自分はcssを付けたくなかったためMathMLにしました。そのため以下のようにオプションを設定しています。
KaTeXでは、htmlのみを出力、MathMLのみを出力、htmlを表示してMathMLをアクセシビリティのために不可視で付ける、の3種類が選択可能で、3つ目がデフォルトになっています。(ちなみにcssをつけないとダブるのはこのためです。)
自分はcssを付けたくなかったためMathMLにしました。そのため、以下のようにオプションを設定しています。
```js
.use(rehypeKatex, {output:'mathml'})
```
@ -102,7 +103,7 @@ $$
x = \frac{-b\pm \sqrt{b^2-4ac}}{2a}
$$
クーロンの法則
二乗の和
$$
F=k_0{q_1q_2 \over r^2} = {1 \over 4\pi\epsilon_0}{q_1q_2 \over r^2}
\sum_{k=1}^nk^2=\frac{1}{6}n(n+1)(2n+1)
$$