Markdownのリストで段組みを揃えて改行する方法

Markdownのリストで段組みを揃えて改行する方法が分かったので共有します。

• どういうことかというと
  
  こんな感じに
  • 段組みを揃えて
    改行できるよ

自分のブログにも書いていますが、広く共有したいと思いこちらにも書かせて頂きます。

環境

確認できた対応している環境は以下の通り

• Github
• Qiita
• Visual Studio Code の Markdown All in Oneのプレビュー
• npm の markdown-it

恐らく他のMarkdown対応のエディタやサービスも書けると思います。

書き方

リストの行末に改行タグをつけて、次の行は素のテキストを書けばよいです。
改行タグは半角スペース二つ か、HTMLの改行タグの<br>です。

例（半角スペースはわかりづらいため<br>で書きます）

- リンゴ<br>
Apple
- オレンジ<br>
Orange
- イチゴ<br>
Strawberry

• リンゴ
  
  Apple
• オレンジ
  
  Orange
• イチゴ
  
  Strawberry

なぜこれで改行できるかと言うと、HTMLを見ると分かりやすいです。

<ul>
  <li>リンゴ<br>Apple</li>
  <li>オレンジ<br>Orange</li>
  <li>イチゴ<br>Strawberry</li>
</ul>

上のように<li></li>タグの中で改行コードがつくため、行頭を揃えて段組みできるようになります。

その他にも使える

番号付きリスト

> 1. 第一条<br>
> ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。  
> 2. 第二条<br>
> ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第一条に反する場合は、この限りでない。  
> 3. 第三条<br>
> ロボットは、前掲第一条および第二条に反するおそれのないかぎり、自己をまもらなければならない。  
> 
> — 2058年の「ロボット工学ハンドブック」第56版、『われはロボット』より

1. 第一条
   
   ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。
2. 第二条
   
   ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第一条に反する場合は、この限りでない。
3. 第三条
   
   ロボットは、前掲第一条および第二条に反するおそれのないかぎり、自己をまもらなければならない。

— 2058年の「ロボット工学ハンドブック」第56版、『われはロボット』より

※ >は引用

表組み

| 言語   | フレームワーク                |
|--------|-------------------------------|
| Python | Flask<br>Django<br>pyramid    |
| PHP    | Laravel<br>CakePHP<br>Symfony |
| Java   | Struts<br>Spring              |

言語	フレームワーク
Python	Flask Django pyramid
PHP	Laravel CakePHP Symfony
Java	Struts Spring

Qiitaだと<tbody>にvertical-align:middleが付いているため、縦方向は中央になるようです。

終わりに

手順書で補足を付ける時や、Excelの表をそっくり表現するときに使えるのではないでしょうか。