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

はじめに

Markdown でちょっとしたメモを書いていると、メモ書きのつもりが、それなりの規模になってきて、目次を作りたくなる。目次をつけるのは Markdown Preview Enhanced の機能でできる。

そんで、目次をつけると、どうも章番号を振りたくなってくる。

章番号を振る一番単純なやり方は、見出しに対して手でぽちぽち番号を振っていく方法だけれども、文章の更新がかかるたびに番号を振りなおすのはいかにも効率が悪い。

というわけで Markdown Preview Enhanced のスタイルを使って、見出しに対して自動的に章番号を割り付けるようにしたので、その方法をまとめておく( Markdown Preview Enhanced とは書いているけど、同様に CSS で見た目をコントロールしているよう他のプレビュー機能でも有効な方法のはず)。

ついでに、同様の方法で目次にも番号を自動的に割り付ける方法もまとめておく。

目標

• 見出し項目(#とか##とか)に対して、プレビュー時に自動的に章番号を割り付ける
• Markdown Preview Enhanced で生成した目次に対しても同様に自動的に章番号を割り付ける。

つまり、こうしたい。

環境

• OS
  • Windows 10
• エディタ
  • Visual Studio Code バージョン: 1.31.1
• 前提とする拡張機能
  • Markdown Preview Enhanced

見出しに対して自動的に章番号を割り付ける方法

Markdown Preview Enhanced のスタイルファイルに以下を記載(スタイルファイルは、マークダウンが有効なファイルを開いている状態で、Ctrl+Shift+P で Markdown Preview Enhanced : Customize CSS を選択すれば開ける)。

body{
  counter-reset: chapter;
}

h1{
  counter-reset: sub-chapter;
}

h2{
  counter-reset: section;
}

h3{
  counter-reset: sub-section;
}

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

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

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

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

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

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

まぁ、とくに何を説明する必要もないのだろうけど、ざっくり以下の感じ(hX は h1 とか h2 の総称)。

• hX::before{～}の counter-increment でカウンタ変数を定義。
• 定義したカウンタ変数を、一個前のhx要素のスタイルでリセット(h2の場合はh1で、みたいな感じ。h1の場合はbodyでリセット)。
• 見出しの章番号のフォーマットは、hX::before{～} の content で定義。

目次に対して自動的に章番号を割り付ける

同様の方法で、Markdown Preview Enhanced が吐き出す目次に対しても自動的に番号を割り付けるようにした。

ただし、Markdown Preview Enhanced が吐き出す目次は Unordered List での記述になっている。Unordered List の記述は、タグ展開で ul/liタグ になるわけだけれども、単純にこのタグに対するスタイルとして番号を自動で割り付けるようにすると、ほかのリスト表記の部分も番号が振られてしまう。

というわけで、あまりスマートな方法ではないけれども、一回目次を生成して、生成した目次を<div class="TOC">でくるんでおいて、範囲指定のスタイルで番号を振るようにした(なにか他にもいい方法があるような気もするが…)。

そういうわけで、Markdown Preview Enhanced のスタイルファイルに以下を記載。

div.TOC ul {
  counter-reset: section;
}

.markdown-preview.markdown-preview {
  div.TOC li {
    list-style: none;
  }
  div.TOC ul>li:before {
      counter-increment : section;
      content : counters(section, '.') '. ';
  }
}

そんで、使うときにはこうしておく。

# Table of Contents
<div class="TOC"> <== これと
<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->

<!-- code_chunk_output -->
- [Table of Contents](#table-of-contents)
- [hoge](#hoge)
  - [hogehoge](#hogehoge)
    - [hogehogehoge](#hogehogehoge)
- [fuga](#fuga)
  - [fugafuga](#fugafuga)
    - [fugafugafuga](#fugafugafuga)
      - [fugafugafugafuga1](#fugafugafugafuga1)
        - [fugafugafugafugafuga](#fugafugafugafugafuga)
      - [fugafugafugafuga2](#fugafugafugafuga2)
  - [fugafuga](#fugafuga-1)
    - [fugafugafuga](#fugafugafuga-1)
      - [fugafugafugafuga](#fugafugafugafuga)
<!-- /code_chunk_output -->
</div> <== これは手動入力

# hoge
ほげ
## hogehoge
…

そうするとこうなる。

最後に

とりあえず、やりたいことは達成した。とは言いつつ、 <div class="TOC"> を追加するのはなんだか気に入らない。もっとましなやり方はないのだろうか。