noteにテーブル（表）を埋め込む

やじゅです。
2020/10/30現在、noteではテーブル（表）の表示には対応していません。
これから note にはサイエンス系の記事を書いていきたいと思っているので数式に引き続きテーブル（表）の表示もやってみます。

【2021/12/12追記】
noteの新エディタで数式の機能が追加される予定です。プレビュー版では数式が試せます、そこで数式でテーブル(表)の表示する記事を書きました。

数式表示の応用

前回の記事でGithubのgistを使用して数式を表示してみました。
2022/05/19にGithub側でMarkDownに数式対応しましたが、noteにより埋め込みでは表示できないです。ただ、noteは数式対応するようになったため、埋め込みで数式表示する必要はなくなりました。

テーブル（表）の表示

①GitHubのgistを使用するのでGitHubのアカウント必要となります。
②gistを新規作成します、その際の拡張子はmdにしておきます。
③Markdown記法でテーブルを作成します。ツールを使うと楽です。
Markdown表テーブル作成ツール - Note PM
④最後にgistのURLをnoteにて埋め込むと下記のように表示されます。

試した感じでは、結構な行数の表でも一度に表示出来ます。
セルの結合などはMakrDown記法なのでそこは弱いです。

複雑なテーブル（表）の表示

GitHubはMakrDown記法以外にAsciiDoc記法に対応しています。
AsciiDoc記法なら複雑なテーブル表示が実現できます。

①GitHubのgistを使用するのでGitHubのアカウント必要となります。
②gistを新規作成します、その際の拡張子はadocにしておきます。
③AsciiDoc記法でテーブルを作成します。ツールを使うと楽です。
Asciidoctor 文法クイックリファレンス(日本語訳) テーブル
④最後にgistのURLをnoteにて埋め込むと下記のように表示されます。

gistではプレビュー しての確認が出来ないので、AsciiDocを作る際には下記サイトで事前に確認しておくといいでしょう。
AsciiDoc Tiny Editor 

HTMLの埋め込み

ちょっとついでではあるのですが、ASCII DOCではHTMLを埋め込むことができます。note では対応しない数式(数式表示Webサービスを利用)やルビを表示することも可能だったりします。
pass 指定することで ＆や＜＞などの記号が通常の文字に置換されずに生のHTMLをそのまま出力できるようになります。

・ Asciidoctor で <br> 的なものを定義する
・ AsciiDoc: How to embed youtube videos in github-flavored asciidoc?

ifdef::env-github[]
:br: pass:p[ +]
ASCII DOCならHTMLを埋め込むことで数式もルビをふることもできる。{br}

pass:[<ruby><rb>hello world</rb><rp>（</rp><rt>こんにちは世界</rt><rp>）</rp></ruby>]{br}
endif::[]

最後に

GitHubのgistを埋め込んで表示することで note でも表現力を持った表示が可能になります。
表を画像に変換して表示するよりは、この方法が編集の自由度が高いですし、テキスト検索もできます。

この表示方法がいいかどうかはありますが、小説を書く上でルビがあればと思っている人はいるでしょう。
数学ガールで有名な結城浩先生のnoteでpdfの一部を画像で掲載しているわけですから、note を窓口にした方法もありだと思います。

【2021/10/14追記】
ルビについては、9月の改善で機能が追加されました。