Typoraの見出し自動連番設定ガイド
Typoraでは、CSSカスタムスタイルを使用して Markdown ファイルの見出しに自動的に番号を付与できます。この機能により、長いドキュメントでも視認性が向上し、階層構造が明確になります。
パターンA：一級見出しから連番を表示
/**************************************
* アウトライン（TOC）用の見出しカウンター設定
**************************************/
.md-toc-inner {
text-decoration: none;
}
/* TOCルートで全てのカウンターを初期化 */
.md-toc-content {
counter-reset: tlv1 tlv2 tlv3 tlv4 tlv5 tlv6;
}
.md-toc-h1 {
margin-left: 0;
font-size: 1.5rem;
counter-reset: tlv2 tlv3 tlv4 tlv5 tlv6;
}
.md-toc-h2 {
font-size: 1.1rem;
margin-left: 1.5rem;
counter-reset: tlv3 tlv4 tlv5 tlv6;
}
.md-toc-h3 {
margin-left: 3rem;
font-size: .9rem;
counter-reset: tlv4 tlv5 tlv6;
}
.md-toc-h4 {
margin-left: 4.5rem;
font-size: .85rem;
counter-reset: tlv5 tlv6;
}
.md-toc-h5 {
margin-left: 6rem;
font-size: .8rem;
counter-reset: tlv6;
}
.md-toc-h6 {
margin-left: 7.5rem;
font-size: .75rem;
}
/* 一級見出しの連番表示 */
.md-toc-h1:before {
color: black;
counter-increment: tlv1;
content: counter(tlv1) ". ";
}
.md-toc-h1 .md-toc-inner {
margin-left: 0;
}
/* 二級見出し: tlv1 + tlv2 */
.md-toc-h2:before {
color: black;
counter-increment: tlv2;
content: counter(tlv1) "." counter(tlv2) ". ";
}
/* 三級見出し: tlv1 + tlv2 + tlv3 */
.md-toc-h3:before {
color: black;
counter-increment: tlv3;
content: counter(tlv1) "." counter(tlv2) "." counter(tlv3) ". ";
}
/* 四級見出し: tlv1 + tlv2 + tlv3 + tlv4 */
.md-toc-h4:before {
color: black;
counter-increment: tlv4;
content: counter(tlv1) "." counter(tlv2) "." counter(tlv3) "." counter(tlv4) ". ";
}
/* 五級見出し: tlv1 + tlv2 + tlv3 + tlv4 + tlv5 */
.md-toc-h5:before {
color: black;
counter-increment: tlv5;
content: counter(tlv1) "." counter(tlv2) "." counter(tlv3) "." counter(tlv4) "." counter(tlv5) ". ";
}
/* 六級見出し: tlv1 + tlv2 + tlv3 + tlv4 + tlv5 + tlv6 */
.md-toc-h6:before {
color: black;
counter-increment: tlv6;
content: counter(tlv1) "." counter(tlv2) "." counter(tlv3) "." counter(tlv4) "." counter(tlv5) "." counter(tlv6) ". ";
}
/**************************************
* ドキュメント本文の見出しカウンター設定
**************************************/
#write {
counter-reset: lvl1 lvl2 lvl3 lvl4 lvl5 lvl6;
}
h1 {
counter-reset: lvl2 lvl3 lvl4 lvl5 lvl6;
}
h2 {
counter-reset: lvl3 lvl4 lvl5 lvl6;
}
h3 {
counter-reset: lvl4 lvl5 lvl6;
}
h4 {
counter-reset: lvl5 lvl6;
}
h5 {
counter-reset: lvl6;
}
/* 一級見出しの連番 */
#write h1:before {
counter-increment: lvl1;
content: counter(lvl1) ". ";
}
/* 二級見出し: lvl1 + lvl2 */
#write h2:before {
counter-increment: lvl2;
content: counter(lvl1) "." counter(lvl2) ". ";
}
/* 三級見出し: lvl1 + lvl2 + lvl3 */
#write h3:before,
h3.md-focus.md-heading:before {
counter-increment: lvl3;
content: counter(lvl1) "." counter(lvl2) "." counter(lvl3) ". ";
}
/* 四級見出し: lvl1 + lvl2 + lvl3 + lvl4 */
#write h4:before,
h4.md-focus.md-heading:before {
counter-increment: lvl4;
content: counter(lvl1) "." counter(lvl2) "." counter(lvl3) "." counter(lvl4) ". ";
}
/* 五級見出し: lvl1 + lvl2 + lvl3 + lvl4 + lvl5 */
#write h5:before,
h5.md-focus.md-heading:before {
counter-increment: lvl5;
content: counter(lvl1) "." counter(lvl2) "." counter(lvl3) "." counter(lvl4) "." counter(lvl5) ". ";
}
/* 六級見出し: lvl1 + lvl2 + lvl3 + lvl4 + lvl5 + lvl6 */
#write h6:before,
h6.md-focus.md-heading:before {
counter-increment: lvl6;
content: counter(lvl1) "." counter(lvl2) "." counter(lvl3) "." counter(lvl4) "." counter(lvl5) "." counter(lvl6) ". ";
}
/**************************************
* 柔軟なインデントシステム
* CSSカスタムプロパティで一括管理
**************************************/
:root {
--indent-h1: 0;
--indent-h2: 1.5rem;
--indent-h3: 3rem;
--indent-h4: 4.5rem;
--indent-h5: 6rem;
--indent-h6: 7.5rem;
}
#write h1 {
margin-left: var(--indent-h1);
padding-left: 0;
}
#write h2 {
margin-left: var(--indent-h2);
padding-left: 0;
}
#write h3 {
margin-left: var(--indent-h3);
padding-left: 0;
}
#write h4 {
margin-left: var(--indent-h4);
padding-left: 0;
}
#write h5 {
margin-left: var(--indent-h5);
padding-left: 0;
}
#write h6 {
margin-left: var(--indent-h6);
padding-left: 0;
}
/**************************************
* サイドバーアウトラインの見出し番号
**************************************/
.sidebar-content {
counter-reset: lvl1 lvl2 lvl3 lvl4 lvl5 lvl6;
}
.outline-h1 {
counter-reset: lvl2 lvl3 lvl4 lvl5 lvl6;
}
.outline-h2 {
counter-reset: lvl3 lvl4 lvl5 lvl6;
}
.outline-h3 {
counter-reset: lvl4 lvl5 lvl6;
}
.outline-h4 {
counter-reset: lvl5 lvl6;
}
.outline-h5 {
counter-reset: lvl6;
}
.outline-h1>.outline-item>.outline-label:before {
counter-increment: lvl1;
content: counter(lvl1) ". ";
}
.outline-h2>.outline-item>.outline-label:before {
counter-increment: lvl2;
content: counter(lvl1) "." counter(lvl2) ". ";
}
.outline-h3>.outline-item>.outline-label:before {
counter-increment: lvl3;
content: counter(lvl1) "." counter(lvl2) "." counter(lvl3) ". ";
}
.outline-h4>.outline-item>.outline-label:before {
counter-increment: lvl4;
content: counter(lvl1) "." counter(lvl2) "." counter(lvl3) "." counter(lvl4) ". ";
}
.outline-h5>.outline-item>.outline-label:before {
counter-increment: lvl5;
content: counter(lvl1) "." counter(lvl2) "." counter(lvl3) "." counter(lvl4) "." counter(lvl5) ". ";
}
.outline-h6>.outline-item>.outline-label:before {
counter-increment: lvl6;
content: counter(lvl1) "." counter(lvl2) "." counter(lvl3) "." counter(lvl4) "." counter(lvl5) "." counter(lvl6) ". ";
}
/**************************************
* フォーカス状態の見出しデフォルト装飾を上書き
**************************************/
#write>h1.md-focus:before,
#write>h2.md-focus:before,
#write>h3.md-focus:before,
#write>h4.md-focus:before,
#write>h5.md-focus:before,
#write>h6.md-focus:before,
h1.md-focus:before,
h2.md-focus:before,
h3.md-focus:before,
h4.md-focus:before,
h5.md-focus:before,
h6.md-focus:before {
color: inherit;
border: inherit;
border-radius: inherit;
position: inherit;
left: initial;
float: none;
top: initial;
font-size: inherit;
padding-left: inherit;
padding-right: inherit;
vertical-align: inherit;
font-weight: inherit;
line-height: inherit;
}
パターンB：一級見出しは連番なし
/**************************************
* アウトライン（TOC）用のカウンター設定
**************************************/
.md-toc-inner {
text-decoration: none;
}
.md-toc-content {
counter-reset: tlv1 tlv2 tlv3 tlv4 tlv5 tlv6;
}
.md-toc-h1 {
margin-left: 0;
font-size: 1.5rem;
counter-reset: tlv2 tlv3 tlv4 tlv5 tlv6;
}
.md-toc-h2 {
font-size: 1.1rem;
margin-left: 1.5rem;
counter-reset: tlv3 tlv4 tlv5 tlv6;
}
.md-toc-h3 {
margin-left: 3rem;
font-size: .9rem;
counter-reset: tlv4 tlv5 tlv6;
}
.md-toc-h4 {
margin-left: 4.5rem;
font-size: .85rem;
counter-reset: tlv5 tlv6;
}
.md-toc-h5 {
margin-left: 6rem;
font-size: .8rem;
counter-reset: tlv6;
}
.md-toc-h6 {
margin-left: 7.5rem;
font-size: .75rem;
}
/* 一級見出しには連番を表示しない */
.md-toc-h1:before {
display: none;
}
/* 二級見出し: tlv2 のみ使用 */
.md-toc-h2:before {
color: black;
counter-increment: tlv2;
content: counter(tlv2) ". ";
}
/* 三級見出し: tlv2 + tlv3 */
.md-toc-h3:before {
color: black;
counter-increment: tlv3;
content: counter(tlv2) "." counter(tlv3) ". ";
}
/* 四級見出し: tlv2 + tlv3 + tlv4 */
.md-toc-h4:before {
color: black;
counter-increment: tlv4;
content: counter(tlv2) "." counter(tlv3) "." counter(tlv4) ". ";
}
/* 五級見出し: tlv2 + tlv3 + tlv4 + tlv5 */
.md-toc-h5:before {
color: black;
counter-increment: tlv5;
content: counter(tlv2) "." counter(tlv3) "." counter(tlv4) "." counter(tlv5) ". ";
}
/* 六級見出し: tlv2 + tlv3 + tlv4 + tlv5 + tlv6 */
.md-toc-h6:before {
color: black;
counter-increment: tlv6;
content: counter(tlv2) "." counter(tlv3) "." counter(tlv4) "." counter(tlv5) "." counter(tlv6) ". ";
}
/**************************************
* ドキュメント本文の見出しカウンター設定
**************************************/
#write {
counter-reset: lvl1 lvl2 lvl3 lvl4 lvl5 lvl6;
}
h1 {
counter-reset: lvl2 lvl3 lvl4 lvl5 lvl6;
}
h2 {
counter-reset: lvl3 lvl4 lvl5 lvl6;
}
h3 {
counter-reset: lvl4 lvl5 lvl6;
}
h4 {
counter-reset: lvl5 lvl6;
}
h5 {
counter-reset: lvl6;
}
/* 一級見出しは番号なし */
#write h1:before {
display: none;
}
/* 二級見出し: lvl2 を使用 */
#write h2:before {
counter-increment: lvl2;
content: counter(lvl2) ". ";
}
/* 三級見出し: lvl2 + lvl3 */
#write h3:before,
h3.md-focus.md-heading:before {
counter-increment: lvl3;
content: counter(lvl2) "." counter(lvl3) ". ";
}
/* 四級見出し: lvl2 + lvl3 + lvl4 */
#write h4:before,
h4.md-focus.md-heading:before {
counter-increment: lvl4;
content: counter(lvl2) "." counter(lvl3) "." counter(lvl4) ". ";
}
/* 五級見出し: lvl2 + lvl3 + lvl4 + lvl5 */
#write h5:before,
h5.md-focus.md-heading:before {
counter-increment: lvl5;
content: counter(lvl2) "." counter(lvl3) "." counter(lvl4) "." counter(lvl5) ". ";
}
/* 六級見出し: lvl2 + lvl3 + lvl4 + lvl5 + lvl6 */
#write h6:before,
h6.md-focus.md-heading:before {
counter-increment: lvl6;
content: counter(lvl2) "." counter(lvl3) "." counter(lvl4) "." counter(lvl5) "." counter(lvl6) ". ";
}
/**************************************
* インデント設定（調整可能）
**************************************/
:root {
--indent-h1: 0;
--indent-h2: 1.5rem;
--indent-h3: 3rem;
--indent-h4: 4.5rem;
--indent-h5: 6rem;
--indent-h6: 7.5rem;
}
#write h1 {
margin-left: var(--indent-h1);
padding-left: 0;
}
#write h2 {
margin-left: var(--indent-h2);
padding-left: 0;
}
#write h3 {
margin-left: var(--indent-h3);
padding-left: 0;
}
#write h4 {
margin-left: var(--indent-h4);
padding-left: 0;
}
#write h5 {
margin-left: var(--indent-h5);
padding-left: 0;
}
#write h6 {
margin-left: var(--indent-h6);
padding-left: 0;
}
/**************************************
* サイドバーアウトラインの設定
**************************************/
.sidebar-content {
counter-reset: lvl1 lvl2 lvl3 lvl4 lvl5 lvl6;
}
.outline-h1 {
counter-reset: lvl2 lvl3 lvl4 lvl5 lvl6;
}
.outline-h2 {
counter-reset: lvl3 lvl4 lvl5 lvl6;
}
.outline-h3 {
counter-reset: lvl4 lvl5 lvl6;
}
.outline-h4 {
counter-reset: lvl5 lvl6;
}
.outline-h5 {
counter-reset: lvl6;
}
.outline-h1>.outline-item>.outline-label:before {
display: none;
}
.outline-h2>.outline-item>.outline-label:before {
counter-increment: lvl2;
content: counter(lvl2) ". ";
}
.outline-h3>.outline-item>.outline-label:before {
counter-increment: lvl3;
content: counter(lvl2) "." counter(lvl3) ". ";
}
.outline-h4>.outline-item>.outline-label:before {
counter-increment: lvl4;
content: counter(lvl2) "." counter(lvl3) "." counter(lvl4) ". ";
}
.outline-h5>.outline-item>.outline-label:before {
counter-increment: lvl5;
content: counter(lvl2) "." counter(lvl3) "." counter(lvl4) "." counter(lvl5) ". ";
}
.outline-h6>.outline-item>.outline-label:before {
counter-increment: lvl6;
content: counter(lvl2) "." counter(lvl3) "." counter(lvl4) "." counter(lvl5) "." counter(lvl6) ". ";
}
/**************************************
* フォーカス装飾の上書き
**************************************/
#write>h3.md-focus:before,
#write>h4.md-focus:before,
#write>h5.md-focus:before,
#write>h6.md-focus:before,
h3.md-focus:before,
h4.md-focus:before,
h5.md-focus:before,
h6.md-focus:before {
color: inherit;
border: inherit;
border-radius: inherit;
position: inherit;
left: initial;
float: none;
top: initial;
font-size: inherit;
padding-left: inherit;
padding-right: inherit;
vertical-align: inherit;
font-weight: inherit;
line-height: inherit;
}