【note】ちょっと面倒くさい...noteのテーブル（表）表示方法【KaTeX】

noteには2024年10月3日現在、標準でテーブル（表）機能がありません。そうはいっても、テーブルを使って表示をさせたいと思うことがあるのではないでしょうか。

もっとも簡単なのはテーブルを別のアプリケーションで作成し、画像として表示する方法です。ただし、この方法では文字や数字のコピペや検索ワードとして引っかかりません。

それ以外だと、記号を用いてテキストの表のようなものを作ることぐらいしかできません。そうすると見た目が気になり、修正する場合も嫌になってしまうのではないでしょうか。

しかし、noteでもテーブル（表）を表示する方法があるのです。それは、$${KaTeX}$$記法を用いるやり方です。

$${KaTeX}$$とは？
$${KaTeX}$$は、$${LaTeX}$$形式で記述された数式をウェブブラウザ上で美しく、かつ高速にレンダリング（表示）するためのオープンソースのJavaScriptライブラリです。Khan Academy（カーンアカデミー）によって開発され、広く利用されています。

しかしこれらは本来は数式を表示するための記法のため、簡易的なテーブル（表）しか作成することができません。そのため、複雑なことができない分、覚えることもそれほどありません。

以下の画像はOrg-mode（マークダウン記法みたいなもの）で作成したテキストベースのカーラコードです。
#+begin～#+endで囲ってありますが、見た目を整えるためのおまじないみたいなものなので気にしないでください。

これらを$${KaTeX}$$形式で表示する場合は以下の通りです。
\begin{array}{|c|c|}
\hline
Color & Hex \\
\hline
Red & #F00 \\
Green & #0F0 \\
Blue & #00F \\
Black & #000 \\
White & #FFF \\
\hline
\end{array}

ただし、このままではテーブルとして表示されないため、上下を$$で囲みます。更に#は\#とします。

$$
\begin{array}{|c|c|}
\hline
Color & Hex \\
\hline
Red & \#F00 \\
Green & \#0F0 \\
Blue & \#00F \\
Black & \#000 \\
White & \#FFF \\
\hline
\end{array}
$$

上記を簡単に説明すると
\begin{array}後の{}は列指定{lcr|:}で以下の意味があります。
l（エル）：左揃え
c（シー）：中央揃え
r（アール）：右揃え
|（パイプ）：縦実線
:（コロン）：縦点線

その他は
&：区切り
//：行の区切り
\hline：横実線
\hdashline：横点線
最後に\end{array}で囲みます。

私は普段Org-modeを使用しているので、note用の表を作るときには一旦$${LaTeX}$$に出力後、$${KaTeX}$$用に修正していますが、マークダウン記法でも同じようなことはできるはずです。

これらを覚えるのが手間だと感じるのならば、$${LaTeX}$$の表を生成してくれるウェブサービスがあるので、それらを利用するのも一つの手だと思います。

また、$${KaTeX}$$について詳しく知りたい方はSupport Tableをご覧になるといいと思います。

Support Table · KaTeX