noteに数式でテーブル（表）を表示する
2021/12/11現在、noteではテーブル（表）の表示には対応していません。
noteでは、Githubのgist を埋め込むことが出来るため、gist側でテーブルを表示する方法を考えて、以前に下記の記事を書きました。
新エディタのMarkdown
noteでは、エディタを改良しており、新エディタを試すことができます。
新エディタではMarkdownショートカットが追加されたので、テーブルが使用出来るのかと期待したのですが、機能は一部に限定したものでした。
## 大見出し
### 小見出し
__強調__
**強調**
> 引用
```コード```
~~取り消し線~~
新エディタの数式表現
新エディタでは数式表現の機能が追加されます。2021/12/12現在ではプレビュー版ですが、新エディタを試すことが出来ます。
https://note.com/info/n/nfa4a65bd08ea
noteの数式表示は、KaTeXで表現されています。他ブログの数式表示は MathJax が多いです。
MathJaxは SVG に対して、KaTeX は HTML と CSS だけで構成されていて描画速度が速いとのことです。
数式によるテーブル表示
noteのテーブル機能はしばらく追加されそうもありません。
そこで、数式にはテーブルを表現できる機能がもともと備わっているので、これを応用してテーブルを表示してみます。
$$
\begin{array}{c:ccccccc}
n & 0 & 1 & 2 & 3 & 4 & 8 \\
\hline
F_n & 0 & 1 & 1 & 2 & 3 & 5
\end{array}
$$$$
\begin{array}{c:ccccccc}
n & 0 & 1 & 2 & 3 & 4 & 8 \\ \hline F_n & 0 & 1 & 1 & 2 & 3 & 5
\end{array}
$$
＄＄
\begin{array}{c:c}
\colorbox{yellow}{Title Here} &
\text{Sub Title} \\ \hline \\
\text{Data 1} &
\text{SubData For Data 1} \\ &
\text{SubData For Data 1} \\ &
\text{SubData For Data 1} \\ \\
\text{Data 2} &
\text{SubData For Data 2} \\ &
\text{SubData For Data 2} \\ &
\text{SubData For Data 2} \\ \\
\text{Data 3} &
\text{SubData For Data 3} \\ &
\text{SubData For Data 3} \\ &
\text{SubData For Data 3} \\
\end {array}
＄＄$$
\begin{array}{c:c} \colorbox{yellow}{Title Here} & \text{Sub Title} \\ \hline \\ \text{Data 1} & \text{SubData For Data 1} \\ & \text{SubData For Data 1} \\ & \text{SubData For Data 1} \\ \\ \text{Data 2} & \text{SubData For Data 2} \\ & \text{SubData For Data 2} \\ & \text{SubData For Data 2} \\ \\ \text{Data 3} & \text{SubData For Data 3} \\ & \text{SubData For Data 3} \\ & \text{SubData For Data 3} \\ \end {array}
$$
Tables Generatorを使用する
数式でテーブル用の数式を考えるのは面倒です。
実はテーブルを生成してくれるサイトが既にあります。
https://www.tablesgenerator.com/latex_tables
日本語による表示も可能なのか試してみます。
注意として、noteでは数式表示にはKatexを使用しているので、生成されたテーブルの数式を修正する必要があります。
\begin{table}[]
\begin{tabular}{lll}
\hline
\textbf{商品コード} & \textbf{商品名} & \textbf{単価} \\ \hline
S0001 & りんご & 100円 \\
S0002 & バナナ & 150円 \\
S0003 & パイナップル & 300円 \\ \hline
\end{tabular}
\end{table}上の数式を修正します。{table}や{tabular}の属性には対応していません。
{table}の代わりに{array}にします。{tabular}{lll}の{lll}の部分を{array}の後にパイプ(|)の区切りに{l|l|l}します。
記法の意味
「l」は左寄せ、「c」が中央寄せ、「r」が右寄せで列数分書きます。
縦線の実線はパイプ(|)の区切り 例 {c|c|c}
縦線の点線はコロン(:)の区切り 例 {c:c:c}
縦線不要 例 {c:c:c}
横線は、\hline
$$
\begin{array}{l:l:l}
\textbf{商品コード} & \textbf{商品名} & \textbf{単価} \\ \hline
S0001 & りんご & 100円 \\
S0002 & バナナ & 150円 \\
S0003 & パイナップル & 300円 \\
\end {array}
$$$$
\begin{array}{l|l|l}
\textbf{商品コード} & \textbf{商品名} & \textbf{単価} \\ \hline
S0001 & りんご & 100円 \\
S0002 & バナナ & 150円 \\
S0003 & パイナップル & 300円 \\
\end {array}
$$
Visual Studio Codeでプレビュー確認
テーブルのように少し複雑な場合、noteエディタ上で確認するのがしんどいと思います。Visual Studio Codeで拡張機能の「Markdown Preview Enhanced」がKatexをサポートしているので、これならプレビューを見ながら確認できます。
注意点
MarkDownのテーブルでは行の交互に背景色が変わりますが、数式のテーブルでは、そこまでサポートしていません。
Macのブラウザーのスクロールバー表示について、Windowsのブラウザーでは最初からスクロールバーが表示されるのですが、Macでは使用する時にスクロールバーが表示される仕様のため、分かり難いです。
Macのブラウザー側の問題と思いきや、OS側の問題でした。
OSのシステム設定でスクロールバーを常に表示することができます。
マウスで横スクロールさせるには、チルトホイール(ホイールを横に倒す操作)すれば横スクロールします。これを知ってればスクロールバーを常に表示されてなくてもいいのかも知れませんね。
最後に
これで、noteでもテーブルを使用することが出来ます。複雑なテーブルも作ろうと思えば作れると思いますが、今回はここまでにしておきます。
日本人は罫線が大好き
米国ではレポートが主な文書形式であり、罫線を細かく引いて、そこに数字や文字を印字するといった習慣がない。特に「上下方向の罫線は滅多に使用しない」。それに対し、日本はあちらこちらに罫線を引いて境界を作るのを好む。欧州は、日本と米国の中間といった感じで日本ほど細かくはない。
最近の傾向では、出来るだけ線を引かない
この記事が気に入ったらサポートをしてみませんか？