MD ViewerMD Viewer

100% プライベート — すべてブラウザ内で処理

マークダウン インデント — リストとコードブロック

同じスペースがMarkdownでは3つの異なる意味を持ちます。ネストリスト、インデントコード、段落の継続を切り替えて、マークダウン インデントの各ケースをライブプレビューで確認できます。

MD Viewer チーム

例
Markdownソース
プレビュー
  • Fruit
    • Apple
      • Green apple
    • Banana
  • Bread

マークダウン インデントの挙動は文脈依存です。同じ先頭スペースが、直前に来たもの次第で、段落の続き、リスト項目のネスト、コードブロックへの変化のどれにもなります。それが罠です。見た目の整列のために字下げすると、レンダリングが変わって驚く——ネストされたリストが現れる、段落がコードブロックにくっつく、あるいは字下げが音もなく消える。上のプレイグラウンドは、マークダウン インデントの3つのケースをワンクリックで切り替え、何が変わるか正確に見せます。

体得すべき3つの規則があります。リストマーカーの下に揃えた2〜3スペースはリスト内容をネストする。新しいブロックの先頭での4スペースはインデントコードブロックを作る。そして通常の段落の先頭スペース(3つまで)は単に無視される——マークダウン インデントには段落の字下げが存在しないからです。その間に、リスト項目の後の字下げ行が文書ではなくその項目に属する継続のケースがあります。

このページは、サイトのビューア、エディタ、PDFエクスポートを駆動するのと同じエンジンで各ケースをレンダリングします。ここで学ぶことはどこでも通用します。例を試し、ソースを編集し、以下の説明を使って、READMEにコミットする前にマークダウン インデントの挙動を予測してください。

マークダウン インデント:スペースの行き先

入力インデントの役割
- 項目 - 子2スペースの字下げが親の下に子をネスト
1. 項目 1. 子3スペースがマーカーのテキスト下に揃えてネスト
コードここブロック先頭の4スペースがインデントコードを作る
段落 続きのテキスト先頭3スペースまでは除去される。字下げではない
- 項目 続き揃ったインデントが項目の段落を継続

マークダウン インデントを意図的に使う

  1. 1

    リストのネスト:テキストの下に揃える

    マークダウン インデントは、親項目の最初の文字の真下に揃ったときにネストします。-マーカーには2スペース、1.マーカーには3スペースです。上の「ネストリスト」の例で、整列が反射になるまで試してください。

  2. 2

    コードブロック:4スペース、先に空行

    空行の後の先頭4スペースはMarkdownをコードモードに切り替え、マークダウン インデントが等幅テキストをそのまま保存します。「インデントコード」の例が、同じ内容のスイッチのオンオフを見せます。

  3. 3

    段落:何も字下げしない

    段落の先頭スペース(3つまで)は捨てられます。言語には段落のマークダウン インデントがなく、構造は整列ではなく空行から来ます。

  4. 4

    継続:項目のリズムを守る

    長いリスト項目は、継続行が項目のテキストと同じマークダウン インデントを持つとき、綺麗に折り返されます。継続行はコードブロックや新しい段落に流れる代わりに、項目に合流します。

マークダウン インデントが文脈依存な理由(と暗記法)

Markdownは文書をブロックとして解析し、各ブロック型が独自のインデント契約を持ちます。リストブロックは、ネストと継続のために揃ったマークダウン インデントを歓迎します。段落はそれを許容し、捨てます。4スペース深く始まる新しいブロックは、1990年代のメール引用から継承された慣習により、整形済みコードと推定されます。レンダラーはあなたの意図を決して聞きません。今いるブロックの契約を適用するだけです。

実用的な記憶の hook は「4まで数える」です。リストマーカーの後の1〜3スペースは、ネストか継続。開けた場所の4スペースは、コード。リスト項目の直下の4スペースは、項目内のネストされたコード——これが最も人を驚かせ、 harmless に「インデントコード」の例が実演します。迷ったら、バッククォートのフェンス付きコードブロックを優先してください。フェンスは曖昧さがなく、コピペを生き延び、ハイライト用の言語を宣言できます。

マークダウン インデントが理解できれば、リストの設計は当て推量ではなくなります。深いネストは実践上、レベルごとに2スペースと4スペースを交互に重ねます。マークダウン 番号付きリストのページは、同じ整列規則の上に番号の規則を重ねます。両ページがこのサイトのライブエンジンを共有しているため、ここで検証した挙動は、そこでも信頼できる挙動です。

マークダウン インデントの間違い

1. 親 1. 子(2スペース)

1. 親 1. 子(3スペース)

2スペースは3文字幅の1.マーカーを越えられず、子は親の行に融合します。マークダウン インデントはテキストの下に揃わなければなりません。

段落 字下げされた行

段落 フェンスまたはインデントのコード

段落の直後の4スペースは段落をプレーンテキストとして継続しますが、空行の後の同じ4スペースはコードブロックになります。空行がスイッチです。

段落の先頭スペース

先頭スペースなし

段落の字下げは存在しません。マークダウン インデントの先頭3スペースまでは、レンダリング時に除去されます。散文は整列ではなくブロック構造で組織します。

インデントはPDFを生き延びる

ネストされたリストは字下げレベルを保ち、インデントコードは等幅ブロックを保ったまま、マークダウン PDF 変換を通過します。エクスポートはプレビューと同じ構造を歩くため、ここで検証したマークダウン インデントはそのまま印刷されます。

よくある質問

出典と仕様引用

“An indented code block is composed of one or more indented chunks separated by blank lines.”
CommonMark Specification 0.31.2
“The contents of the code block are the literal contents of the lines, including trailing line endings, minus these four spaces of indentation.”
CommonMark Specification 0.31.2

関連するMarkdownツール