Markdownの見出し・字下げ(インデント)と文章構造

昨日の投稿に引き続き、Visual Studio CodeにおけるMarkdownについての記事です。今回は見出しや字下げと文章の構造との関係についてご紹介いたします。

見出し

見出しはMarkdown記法では#で表現されます。#の数によって見出しの階層を分けることができます。#の数が大きいほうがより深い(細かい)階層になります。

Visual Studio Codeのエディタ上部をクリックすると見出し構造(目次)を見ることができます。

WordPressで目次に表示されるのはこの見出しに相当します。見出しは階層構造になり、Visual Studio Code上で折りたたむことができます(後述のGif)。

箇条書きと番号付きリスト

箇条書きや番号付きリストも階層構造を持ちます。番号付きリストのほうがわかりやすいのでそちらの例を示します。番号付きリストの番号は階層ごとに保存され、同じ階層のリストが来た時に初めて1増えます。以下のMarkdownを記述すると、その下にあるような番号付きリストになります。

1. レベル1-1
    1. レベル2-1
    1. レベル2-2
        1. レベル3-1
        1. レベル3-2
    1. レベル2-3
1. レベル1-2
1. レベル1-3

1. レベル1-1
   1. レベル2-1
   2. レベル2-2
      1. レベル3-1
      2. レベル3-2
   3. レベル2-3
2. レベル1-2
3. レベル1-3

同じインデント(字下げ)にある部分が同じ階層と認識され、そこについて番号が連番になっていることがわかります。Visual Studio Codeで記述すると、プレビュー画面に現在カーソルがある階層の対応部分が強調して表示されます(縦線がついている部分)。さらにこれらも見出しと同様折りたたむことができます。

まとめ

Markdown記法に基づいて、うまく見出しや箇条書きの階層を作ることで、文章の全体の構成が見やすくなります。今回の例では文章が短いためその恩恵を想像することが難しいかもしれませんが、何百行にもわたる文章があったとき、その構造をきちんと記述することによって容易に文章の編集・閲覧ができるようになります。

【PR】

Markdown記法はこちらの参考文献で学びました。基礎からカバーされており、とりあえずこれを読んでおけばMarkdownの基本はばっちりでしょう。