From a549d7d017f203f5ff1b4a9a9e51e0e019e6e888 Mon Sep 17 00:00:00 2001 From: moris Date: Sun, 22 Dec 2024 11:45:15 +0900 Subject: [PATCH] =?UTF-8?q?New=20article=E2=9C=A8:=20remark-math?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Posts/remark-math.md | 108 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 Posts/remark-math.md diff --git a/Posts/remark-math.md b/Posts/remark-math.md new file mode 100644 index 0000000..5dd8a9c --- /dev/null +++ b/Posts/remark-math.md @@ -0,0 +1,108 @@ +--- +title: remark-mathでMarkdownに数式機能(TeX)を追加 +description: ブログにTeXで数式を書けるようにしました。オプションについても少し触れます。 +thumbnail: https://moris.day/files/img/TeX_logo.svg +emoji: +date: 2024-12-22 +category: Tech +tags: [Markdown, unified, TeX] +index: true +published: true +--- + + +このブログはMarkdownで記述されている、いわゆるJAMstackなサイトで、パーサーにはunified(remark)を採用しています。unifiedは標準で主要なMarkdown文法に対応しておりブログに使うには十分です。 +しかし、このブログは技術ブログ、となると数式は必須なのですが、Texを$で囲う記法を試したところ、どうやら対応してないようでそのまま表示されてしまいました。 + + +## remark-math +remark-mathというunifiedプラグインを使用してTeX記法での数式に対応しました。 +https://github.com/remarkjs/remark-math + +この辺りは詳しくないのですが、ブラウザで数式を表示するエンジンとしてMathJaxとKaTeXが主に使われているようで、remark-mathはその2つに対応しています。 +KaTeXの方が軽量らしいのでそちらを採用することに(サーバーサイドレンダリングには無関係かも) + +使い方は他のプラグイン同様にインストールして`use()`で追加するのですが、2つ追加する必要があります。 +一つ目は`remark-math`で、これを適用するとTeX記法の部分がlang=mathのコードブロック(```で囲うやつ)に変換されます。 +そして、二つ目の`rehype-katex`(MathJaxの場合はrehype-mathjax)がこれを数式に変換します。 +そのため以下のような記法でも数式に変換することができます。 + +~~~ +```math + +e = mc^2 + +``` +~~~ +サンプルコード + +```sh +npm install remark remark-rehype rehype-stringify + +npm install remark-math +npm install rehype-katex // KaTeXの場合 +npm install rehype-mathjax // MathJaxの場合(コードもいい感じに置き換えてね) +``` + +```js +import { remark } from 'remark' +import remarkmath from 'remark-math' +import remarkRehype from 'remark-rehype' +import rehypeKatex from 'rehype-katex' +import rehypeStringify from 'rehype-stringify' + +let markdown = "$e=mc^2$" + +let html = remark() + .use(remarkmath) + .use(remarkRehype) + .use(rehypeKatex) + .use(rehypeStringify) + .processSync(markdown) + +console.log(String(html)) +``` +Output: +```html +

e=mc2e=mc^2

+``` + +実行するとhtmlが出てくるのですが、そのまま.htmlで保存してブラウザで開くと、ダブってるし片方は数式になっていません。 +これだけではダメでKaTeXでは追加のCSSを適用する必要があるのです。(MathJaxではCSSが一緒に出力されるので不要) +なので以下のlinkタグを追加して再度開くと +```html + +``` +![](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) + +KaTeXではhtmlのみを出力、MathMLのみを出力、htmlを表示してMathMLをアクセシビリティのために不可視で付ける、の3種類が選択可能で3つ目がデフォルトになっています。(ちなみにcssをつけないとダブるのはこのためです。) +自分はcssを付けたくなかったためMathMLにしました。そのため以下のようにオプションを設定しています。 +```js +.use(rehypeKatex, {output:'mathml'}) +``` + +そのほかのオプションはKaTeXのサイトで確認できます。 +https://katex.org/docs/options.html + +このブログのMarkdown周りのコードはここです。 +https://git.moris.day/moris/moris-blog/src/branch/main/src/lib/components/Markdown.svelte + + +## おまけの数式 + +二次方程式 解の公式 +$$ +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} +$$ \ No newline at end of file