Markdown の表内にリストを書きたい
Markdown で表を書いていると、この中で複数行に渡るリストを挿入したいときがある。
しかしながら、表のそれぞれのセルは 1 行で書くことが要求されており、リストを挿入することは少し難しい。
この問題の解決方法として以下の 2 つの方法を提案したい。
■ 改行タグを使ってリストっぽくする
改行タグ <br> を使うと強制的に改行することが出来る。これを使えば表内であっても改行できる。
例えば次のように利用することが出来る。
| Contents | Description |
| :------: | :------------------------------------------------- |
| Content1 | Description1-1<br>Description1-2<br>Description1-3 |
| Content2 | Description2 |
| Contents | Description |
|---|---|
| Content1 | Description1-1 Description1-2 Description1-3 |
| Content2 | Description2 |
したがって、リストっぽくしたいのであれば ● を先頭に追加することでリストを作ることが出来る。
| Contents | Description |
| :------: | :----------------------------------------------------- |
| Content1 | Description <br>● Detail-1<br>● Detail-2<br>● Detail-3 |
| Content2 | Description2 |
| Contents | Description |
|---|---|
| Content1 | Description ● Detail-1 ● Detail-2 ● Detail-3 |
| Content2 | Description2 |
番号付きのリストにしたい場合には 1. 2. などと手動で追加すれば良い。
チェックボックスには絵文字の white_check_mark (
) や Unicode の U+2705 (✅) をマーカーに利用すると良いだろう。
このような方法では以下のような問題が生じる。
-
●や1.などのマーカーを手動で打つ必要がある - リストの入れ子が困難
- 全角スペースなどで無理やりインデントさせれば疑似的な入れ子は可能
- リスト要素の順序を編集することが面倒
- リストのレイアウトが適応されているわけではない
- リスト内の要素が長く折り返しを含む場合、マーカーの位置に折り返しの先頭が来る
- リスト要素を選択すると
●や1.などのマーカーも選択される
■ HTML によるマークアップを行う
リストのマークアップを HTML によって行えば、表内でもリストを書くことが出来る。
HTML によるリストの表記は <ol> タグまたは <ul> タグと <li> タグを使って表現する。
リストの各要素は <li> タグで囲い、これらを <ol> タグで囲えば番号付きリスト、<ul> で囲えば箇条リストとなる。
例えば、以下のように表現することでリストを書くことが出来る。
<ol>
<li>Mix flour, baking powder, sugar, and salt.</li>
<li>In another bowl, mix eggs, milk, and oil.</li>
<li>Stir both mixtures together.</li>
<li>Fill muffin tray 3/4 full.</li>
<li>Bake for 20 minutes.</li>
</ol>
番号付きリストの結果（折りたたみ）
- Mix flour, baking powder, sugar, and salt.
- In another bowl, mix eggs, milk, and oil.
- Stir both mixtures together.
- Fill muffin tray 3/4 full.
- Bake for 20 minutes.
<ul>
<li>Milk</li>
<li>Cheese
<ul>
<li>Blue cheese</li>
<li>Feta</li>
</ul>
</li>
</ul>
箇条書きリストの結果（折りたたみ）
- Milk
- Cheese
- Blue cheese
- Feta
<input type="checkbox">- HTML: HyperText Markup Language | MDN
リストのそれぞれ先頭に <input type="checkbox"> を付ければ良い。
<ul>
<li><input type="checkbox"> Red</li>
<li><input type="checkbox" checked> Blue</li>
<li><input type="checkbox"> Yellow</li>
</ul>
タスクリストの結果（折りたたみ）
Qiita では HTML サニタイズの影響で上手く HTML でチェックボックスを表示できないようだ。
- Red
- Blue
- Yellow
Qiita では、<input> タグを [ ]・[x] にするとなぜか上手くいく。
<ul>
<li>[ ] Red</li>
<li>[x] Blue</li>
<li>[ ] Yellow</li>
</ul>
タスクリストの結果（折りたたみ）
- Red
- Blue
- Yellow
あるいは、<code> タグを利用して次のように書くと、チェックボックスのように見えるだろう。
<ul>
<li><code>チェックボックスリスト</code> Red</li>
<li><code>チェックボックスリスト</code> Blue</li>
<li><code>チェックボックスリスト</code> Yellow</li>
</ul>
タスクリストの結果（折りたたみ）
-
[ ]Red -
[x]Blue -
[ ]Yellow
したがって、このマークアップしたリストを 1 行にして表内に挿入すれば良い。
| Contents | Description |
| :------: | :---------------------------------------------------------------------------------- |
| Content1 | Description<ul><li>Detail-1</li><li>Detail-2</li><li>Detail-3</li></ul> |
| Content2 | Description<ol><li>Detail</li><li>Detail</li><li>Detail</li></ol> |
| Content3 | Description<ul><li>[ ] Detail-1</li><li>[x] Detail-2</li><li>[ ] Detail-3</li></ul> |
| Contents | Description |
|---|---|
| Content1 | Description
|
| Content2 | Description
|
| Content3 | Description
|
このようにすれば、入れ子もすることが出来る。
| Contents | Description |
| :------: | :---------------------------------------------------------------------------------------------------------------------------- |
| Content1 | Description<ul><li>Detail-1<ol><li>reason</li><li>reason</li><li>reason</li></ol></li><li>Detail-2</li><li>Detail-3</li></ul> |
| Content2 | Description2 |
| Contents | Description |
|---|---|
| Content1 | Description
|
| Content2 | Description2 |
HTML によってマークアップしたリストは、先に示した改行タグ <br> を利用したリストっぽい書き方で生じた問題のほとんどを解決したと思われる。
また、HTML で編集する際には複数行で作成し、それを 1 行に変換すると良い。この複数行に渡る HTML のリストをコメントアウトで残しておけば、表内のリストを追加編集する作業も比較的楽なものになるだろう。
<!--
<ul>
<li>Detail-1
<ol>
<li>reason</li>
<li>reason</li>
<li>reason</li>
</ol>
</li>
<li>Detail-2</li>
<li>Detail-3</li>
</ul>
-->
VSCode では、複数行を選択してコマンドパレットから Join Lines とすると、選択した行を 1 行にできる。
！注意点
<li> などの HTML タグ内では Markdown が利用できない。したがって、HTML タグを利用する必要がある。
<ul>
<li>**Bold** <strong>Bold</strong></li>
<li>*Italic* <em>Italic</em></li>
<li>`code` <code>code</code></li>
</ul>
- **Bold** Bold
- *Italic* Italic
- `code`
code
余談
Markdown で表内にリストを挿入する方法を紹介した。
ちなみに、Pandoc の Markdown では grid_table があり、複数行に渡って書くことが出来る。しかしながら、この表記方法もいささか面倒くさいように思われる。
また、reStructuredText による Grid tables もあまり簡単な書き方とは思えない。
Markdown table 内の単純な改行は <br> で十分と思われるが、リストを挿入するには少々面倒くさい。
いい感じのパーサを誰か作成してくれることを期待したい。
★ Someone's future work
Markdown table 内には HTML によるリストの挿入がもっともまともに表示することが出来る。
しかしながら、リストの順序を編集することが面倒という点はあまり改善されていないように思われる。
HTML を簡便に表現するための Markdown なのに、結局 HTML に戻ってきてしまっていて残念な気もする。（簡素化によって複雑な表現に制限がかかるのはしょうがないとも言える）
リンクや画像の挿入では、以下のようにラベルで URL などを別表記できる。
これと同じように、表内に複数行を挿入する上手い方法があると良いなぁと思う。
[Example link][label]
[label]: http://example.com/
イメージとしては次のような感じ。
先に > label:: として中に含めるコンテンツを書き込み、:>>label で呼び出す。
> detailList::
- Detail-1
- Detail-2
- Detail-3
| Contents | Description |
| :------: | :------------------------ |
| Content1 | Description :>>detailList |
| Content2 | Description2 |
複数回呼び出せると表内に複数行のリストを書く他にも利用できそう。
追記
2022/10/24: Qiita Markdown 内でタスクリストを HTML で表記する方法を追記。軽微修正。