見出し画像

noteに表を埋め込む(Gist)

今回は、noteにgistを使って表を埋め込む方法を紹介します。


noteに表機能は無い

noteには2024/01/08現在、表やテーブル機能がありません。
ですので、gistというgitの機能「テキストファイル公開サイト(?)」を使用します。

流れ

  1. gistでマークダウンを使って表を作る

  2. noteに埋め込む

gistの使い方

githubにログインして以下のサイトにアクセスします。
または、githubサイトの自分のアイコンからYour gistを選択します。


24/1/8:下記のリンクを差し替えました。


そしたら、右上の+押したりして以下の画面を出します。

そしたら、ファイル名の後に.mdを付けます。.mdとはマークダウンファイルの拡張子です。

マークダウンとは

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

Markdown

だそうです。自分もメモをマークダウンで書くことも多いです。

記法を軽く (24/1/8追記)

一応表に関するmarkdownの記法を軽く紹介します。

マークダウンで表を書く

マークダウンには表の機能あるのでそれを使います。上の表でほとんどネタバレしてるので、基本の話をエスケープだけ。

マークダウンでは「 | 」 を挟むことで、エクセルで言うセルの枠を作成します。また、見出しの一列として2行目に「---」の行を作成します。

\をマークダウンで使用する記号の前に置くことで、マークダウンで使用する記号(**とか)を通常の文字として表示できます。(エスケープ)

上記の記法表のソースコード列はエスケープの嵐です。下記参考。

# markdown_Table.mdのソースコード

| 記法 | 記号(ソースコード) |
| :---: | :---: |
| 枠 | \| 内容 \| |
| 見出しのやつ | --- |
| 左寄せ(デフォ) | :--- |
| 右寄せ | ---: |
| 中央寄せ | :---: |
| **太字** | \*\*太字\*\* |
| *斜体* | \*斜体\* |
| 注釈[^1] | 注釈[^1] |

[^1]: ←は半角スペースが必要。あと絶対最後に記述される

表の公開

表が作れたら、右下のcreate~を押して完成させます。
次に、赤丸のEmbedを押して、Shareを選びます。Embedだとhtmlなどへの埋め込みに使用できます。

Shareのurlをコピー。


noteに埋め込む

先程のurlをnoteの埋め込み機能で埋め込みます。
そうすると、下のようになります。

ちなみに、後から修正する場合は右上のEditで編集します。保存されればnoteの記事も更新されます。

ちなみに、C#シリーズでの表はこれ使ってます。

まとめ

今回はnoteで表を作成する方法でした。
githubのアカウントは無料で作成出来るため、結構手軽かなと思いました。


2024/01/08: 結構多くの方の参考になっているようなので、全体的に整理&情報追加しました。参考になれば幸いです。


参考

参考にさせていただきました。

この記事が気に入ったらサポートをしてみませんか?