Markdown用のCSS

普段、ドキュメントを書くときに使っているエディタは主に２つです。

1. Visual Studio Code
2. Boostnote

Visual Studio Code(VSCode)は、Microsoft謹製のフリーのエディタです。プログラミングはもちろんドキュメンテーションにも使っています。プラグインが豊富だし、割と高速なので、いまさら他のエディタには戻れません(もちろん、場合によってはvim使いますけどね)。

Boostnoteはメモソフトです。ファイルという概念がないので、ぱっとメモを取りたいときに向いています。保存する必要がありませんし、どのディレクトリにどんな名前で保存したのかわからなくなるという心配がないのはとてもありがたいです。

どちらのソフトを使うにしても、Markdownという形式でドキュメントを書いています。VSCodeの場合は、Markdown Preview Enhancedというプラグインを使っています。このプラグインは、コードブロックにPlantUMLがサポートされています。つまり、マークダウン中にテキストでUMLで図が描けるのです。

どちらのソフトもよいのですが、Markdownのプレビューには少し不満があるので、以下のようなCSSを使って改善しています。

html body {
 background-color: #fdf6e3;
 color: #657b83;
}
html body h1, html body h2, html body h3, html body h4 {
 font-family: sans-serif;
 color: #586e75;
}
p, li, td {
 font-family: serif;
}
html body table th {
 background-color: #93a1a1;
 color: #eee8d5;
}

html body table tr:nth-child(even) {
 background-color: #eee8d5;
} 

h1 {
 counter-reset: chapter;
 text-decoration: underline;
 text-align: center;
}
h2 {
 counter-reset: sub-chapter;
 text-decoration: underline;
}
h3 {
 counter-reset: section;
 text-decoration: underline;
}
h4 {
 text-decoration: underline dotted;
}

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)" ";
}

やっていることは以下の通りです。
1. 見出しに自動的に採番する
2. 見出しに下線を引く
3. 見出しはゴシック、本文は明朝にする
4.配色を見やすくSolarizedっぽく
5.テーブルを装飾（ヘッダ、格子模様）

これだけですが、随分と見た目が変わってドキュメントが読みやすくなります。

VSCode, BoostnoteのプレビューやエクスポートでこのCSSが機能することを確認しています。