Markdown の表内にリストを書きたい

Markdown で表を書いていると、この中で複数行に渡るリストを挿入したいときがある。
しかしながら、表のそれぞれのセルは 1 行で書くことが要求されており、リストを挿入することは少し難しい。

この問題の解決方法として以下の 2 つの方法を提案したい。

改行タグ <br> を使ってリストっぽくする
HTML によるマークアップを行う

■ 改行タグを使ってリストっぽくする

改行タグ <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>: 順序付きリスト要素 - HTML: HyperText Markup Language | MDN

<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>: 順序なしリスト要素 - HTML: HyperText Markup Language | MDN

<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 Detail-1 Detail-2 Detail-3
Content2	Description Detail Detail Detail
Content3	Description Detail-1 Detail-2 Detail-3

このようにすれば、入れ子もすることが出来る。

| 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 Detail-1 reason reason reason Detail-2 Detail-3
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 があり、複数行に渡って書くことが出来る。しかしながら、この表記方法もいささか面倒くさいように思われる。

Pandoc # Extension: grid_tables - Pandoc User’s Guide

また、reStructuredText による Grid tables もあまり簡単な書き方とは思えない。

reStructuredText 入門 # テーブル - Sphinx documentation

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 で表記する方法を追記。軽微修正。