schedule2019-09-09

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

MarkdownVSCodeGitHub

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版、『[われはロボット](https://amzn.to/301dvm6)』より

第一条ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。

第二条ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第一条に反する場合は、この限りでない。

第三条ロボットは、前掲第一条および第二条に反するおそれのないかぎり、自己をまもらなければならない。

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

※ >は引用

表組み

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