背景
普段自分は、ちょっとしたメモを書くときにmarkdownを愛用しています。記法がシンプルで直感的に書けることや、専用のエディタがなくてもテキストエディタがあれば編集できるのが好きなところです。
そんなmarkdownですが、一点だけ不満を感じるところがあります。それは、見出しに番号が振られないことです。markdownの記法では、行頭においた#の個数で文章の見出しレベルを表現するのですが、見出しに対して章番号を振りたくなった場合は自分で数字を書く必要があるわけです。文章構造が変わった場合は、当然手作業で振り直すことになるので、面倒でやりたくないです。
markdownはwebページと同じくHTMLの形式で文章を表示しますが、webページではcssカウンターの仕組みを使って章番号の自動表示を実現しています。ですので、cssスタイルファイルに対応するmarkdownエディタであれば、同様に章番号の機能が実現できるわけです。
そこで、章番号が表示できる自分好みのスタイルファイルを作成してみました。jasonm23-swissをベースに、見出しレベルを色分けでわかりやすくしてます。
css
typoraのテーマを追加するときは、「ファイル」→「設定」→「テーマ」→「テーマフォルダを開く」
で表示された場所に.cssファイルをコピーして、Typoraを再起動すればメニューからテーマを選べるようになります。
@charset "utf-8";
html{
counter-reset: chapter;
}
body {
padding:1em;
margin:auto;
max-width:60em;
background:#fefefe;
counter-reset: chapter;
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
h1 {
color: #000000;
font-size: 28px;
clear: right;
}
h1:before {
content: "▌" ;
color: #FF3205;
}
h2 {
border-bottom: 1px solid #CCCCCC;
color: #000000;
font-size: 24px;
counter-increment: chapter;
counter-reset: section;
clear: right;
}
h2:before {
content: "▌" counter(chapter) ". ";
color: #E89707;
}
h3 {
font-size: 20px;
padding-top: 5px;
counter-increment: section;
counter-reset: subsection;
clear: right;
}
h3:before {
content: "▌" counter(chapter) "." counter(section) ". " ;
color: #87FF04;
}
h4 {
font-size: 15px;
padding-top: 5px;
counter-increment: subsection;
}
h4:before {
content: "▌" counter(chapter) "." counter(section) "." counter(subsection) ". ";
color: #78C8E6;
}
h5 {
font-size: 14px;
}
h6 {
color: #777777;
background-color: inherit;
font-size: 14px;
}
hr {
height: 0.2em;
border: 0;
color: #CCCCCC;
background-color: #CCCCCC;
}
p, blockquote, ul, ol, dl, li, table, pre {
margin: 12px 0;
}
code, pre {
border-radius: 3px;
background-color: #F8F8F8;
color: inherit;
}
code {
border: 1px solid #EAEAEA;
margin: 0 2px;
padding: 0 5px;
}
pre {
border: 1px solid #CCCCCC;
line-height: 1.00em;
overflow: auto;
padding: 6px 10px;
}
pre > code {
border: 0;
margin: 0;
padding: 0;
}
a, a:visited {
color: #4183C4;
background-color: inherit;
text-decoration: none;
}
解説
before疑似要素を使うことで、見出しの前に挿入するテキストを指定します。
また、cssカウンターを使うことで、章番号のカウントアップ(counter-increment)およびリセット(counter-reset)を実装することができます。
h2 {
border-bottom: 1px solid #CCCCCC;
color: #000000;
font-size: 24px;
counter-increment: chapter;
counter-reset: section;
clear: right;
}
h2:before {
content: "▌" counter(chapter) ". ";
color: #E89707;
}
参考
おまけ
beforeとは逆に、見出しが表示されたあとのテキストをafterで指定できるので、こんな感じにcontentを指定してあげるととてもカッコよくなります。よかったら使ってみてください。僕は使いません。
h1:before {
content: "††† " ;
color: #FF3205;
}
h1:after {
content: "††† " ;
color: #FF3205;
}
h2:before {
content: "卍卍 " ;
color: #E89707;
}
h2:after {
content: " 卍卍";
color: #E89707;
}
