Markdown Preview Enhanced での見出し自動採番

1 概要

VS Code の拡張機能「Markdown Preview Enhanced」のプレビュー表示において、CSS カウンターを使用して見出し (h2〜h6) に自動的に章番号を振る方法を説明します。

注: Pandoc にて h1 はドキュメントの見出しとして使用しているため、番号を付与するのは Markdown 上では h2 からとし、Pandoc の出力との一貫性を確保しています。

参考: Markdown の見出しに章番号を振る方法(ついでに目次にも) - Qiita

2 前提環境

• Visual Studio Code
• 拡張機能: Markdown Preview Enhanced

3 設定手順

3.1 スタイルファイルを開く

1. VS Code で任意の Markdown ファイルを開く
2. Ctrl+Shift+P でコマンドパレットを開く
3. 「Markdown Preview Enhanced: Customize CSS (Global)」を選択する

style.less ファイルが開きます。このファイルの CSS を編集します。

3.2 見出し自動採番の CSS を追記する

style.less を以下のように置換します。すでに他のカスタマイズが行われている場合は適宜マージを行ってください。

/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

h1 {
  counter-reset: chapter;
}

h2 {
  counter-reset: sub-chapter;
}

h3 {
  counter-reset: section;
}

h4 {
  counter-reset: sub-section;
}

h5 {
  counter-reset: sub-sub-section;
}

.markdown-preview.markdown-preview {
  h2::before {
    counter-increment: chapter;
    content: counter(chapter) " ";
  }

  h3::before {
    counter-increment: sub-chapter;
    content: counter(chapter) "." counter(sub-chapter) " ";
  }

  h4::before {
    counter-increment: section;
    content: counter(chapter) "." counter(sub-chapter) "." counter(section) " ";
  }

  h5::before {
    counter-increment: sub-section;
    content: counter(chapter) "." counter(sub-chapter) "." counter(section) "." counter(sub-section) " ";
  }

  h6::before {
    counter-increment: sub-sub-section;
    content: counter(chapter) "." counter(sub-chapter) "." counter(section) "." counter(sub-section)  "." counter(sub-sub-section) " ";
  }
}

3.3 プレビューで確認する

設定後、Markdown ファイルのプレビューを開くと、各見出しの先頭に章番号が自動的に表示されます。

表示例を次に示します。

見出し1
1 見出し2
1.1 見出し3
1.1.1 見出し4
1.1.1.1 見出し5
1.1.1.1.1 見出し6

4 CSS カウンターの仕組み

4.1 counter-reset

上位の見出しが出現したとき、下位のカウンターをリセットします。

• h1 で chapter カウンターをリセット
• h2 で sub-chapter カウンターをリセット
• h3 で section カウンターをリセット
• h4 で sub-section カウンターをリセット
• h5 で sub-sub-section カウンターをリセット

4.2 counter-increment と content

::before 疑似要素を使用して、見出しの前に番号を挿入します。

• counter-increment で対応するカウンターを加算する
• content で各階層のカウンター値を連結して表示する

4.3 カウンター変数の対応関係

4.4 セレクタの重複指定

.markdown-preview.markdown-preview のようにセレクタを重複指定することで、CSS の詳細度 (specificity) を高め、Markdown Preview Enhanced のデフォルトスタイルを確実に上書きします。