Typora标题自动显示序号，大纲中也显示序号

Typora标题自动显示序号，大纲中也显示序号

代码一：一级标题显示序号

点击查看代码

/**************************************
 * Header Counters in TOC (目录中的标题计数器)
 **************************************/
.md-toc-inner {
    text-decoration: none;
}

/* 在TOC根目录初始化所有计数器 */
.md-toc-content {
    counter-reset: h1toc h2toc h3toc h4toc h5toc h6toc;
}

.md-toc-h1 {
    margin-left: 0;
    font-size: 1.5rem;
    counter-reset: h2toc h3toc h4toc h5toc h6toc; /* 重置所有下级计数器 */
}

.md-toc-h2 {
    font-size: 1.1rem;
    margin-left: 1.5rem;
    counter-reset: h3toc h4toc h5toc h6toc;
}

.md-toc-h3 {
    margin-left: 3rem;
    font-size: .9rem;
    counter-reset: h4toc h5toc h6toc;
}

.md-toc-h4 {
    margin-left: 4.5rem;
    font-size: .85rem;
    counter-reset: h5toc h6toc;
}

.md-toc-h5 {
    margin-left: 6rem;
    font-size: .8rem;
    counter-reset: h6toc;
}

.md-toc-h6 {
    margin-left: 7.5rem;
    font-size: .75rem;
}

/* 一级标题前显示序号 */
.md-toc-h1:before {
    color: black;
    counter-increment: h1toc;
    content: counter(h1toc) ". ";
}

.md-toc-h1 .md-toc-inner {
    margin-left: 0;
}

/* 二级标题编号: 使用 h1toc 和 h2toc */
.md-toc-h2:before {
    color: black;
    counter-increment: h2toc;
    content: counter(h1toc) "." counter(h2toc) ". ";
}

/* 三级标题编号: 使用 h1toc, h2toc 和 h3toc */
.md-toc-h3:before {
    color: black;
    counter-increment: h3toc;
    content: counter(h1toc) "." counter(h2toc) "." counter(h3toc) ". ";
}

/* 四级标题编号: 使用 h1toc, h2toc, h3toc, h4toc */
.md-toc-h4:before {
    color: black;
    counter-increment: h4toc;
    content: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) ". ";
}

/* 五级标题编号: 使用 h1toc, h2toc, h3toc, h4toc, h5toc */
.md-toc-h5:before {
    color: black;
    counter-increment: h5toc;
    content: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) ". ";
}

/* 六级标题编号: 使用 h1toc, h2toc, h3toc, h4toc, h5toc, h6toc */
.md-toc-h6:before {
    color: black;
    counter-increment: h6toc;
    content: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) "." counter(h6toc) ". ";
}

/**************************************
 * Header Counters in Content (正文中的标题计数器)
 **************************************/

/* 在#write根元素初始化所有计数器，确保即使没有上级标题，计数器也存在 */
#write {
    counter-reset: h1 h2 h3 h4 h5 h6;
}

/* 每个标题元素重置所有下级计数器 */
h1 {
    counter-reset: h2 h3 h4 h5 h6;
}

h2 {
    counter-reset: h3 h4 h5 h6;
}

h3 {
    counter-reset: h4 h5 h6;
}

h4 {
    counter-reset: h5 h6;
}

h5 {
    counter-reset: h6;
}

/* 一级标题前显示序号 */
#write h1:before {
    counter-increment: h1;
    content: counter(h1) ". ";
}

/* 二级标题编号: 使用 h1 和 h2 */
#write h2:before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) ". ";
}

/* 三级标题编号: 使用 h1, h2 和 h3 */
#write h3:before,
h3.md-focus.md-heading:before {
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) ". ";
}

/* 四级标题编号: 使用 h1, h2, h3, h4 */
#write h4:before,
h4.md-focus.md-heading:before {
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
}

/* 五级标题编号: 使用 h1, h2, h3, h4, h5 */
#write h5:before,
h5.md-focus.md-heading:before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
}

/* 六级标题编号: 使用 h1, h2, h3, h4, h5, h6 */
#write h6:before,
h6.md-focus.md-heading:before {
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
}

/**************************************
 * 智能缩进系统
 * 使用 CSS 变量方便统一调整
 **************************************/
:root {
    --h1-indent: 0;
    --h2-indent: 1.5rem;
    --h3-indent: 3rem;
    --h4-indent: 4.5rem;
    --h5-indent: 6rem;
    --h6-indent: 7.5rem;
}

/* 基础缩进设置 */
#write h1 {
    margin-left: var(--h1-indent);
    padding-left: 0;
}

#write h2 {
    margin-left: var(--h2-indent);
    padding-left: 0;
}

#write h3 {
    margin-left: var(--h3-indent);
    padding-left: 0;
}

#write h4 {
    margin-left: var(--h4-indent);
    padding-left: 0;
}

#write h5 {
    margin-left: var(--h5-indent);
    padding-left: 0;
}

#write h6 {
    margin-left: var(--h6-indent);
    padding-left: 0;
}

/**************************************
 * 侧边栏大纲编号
 **************************************/
.sidebar-content {
    counter-reset: h1 h2 h3 h4 h5 h6;
}

.outline-h1 {
    counter-reset: h2 h3 h4 h5 h6;
}

.outline-h2 {
    counter-reset: h3 h4 h5 h6;
}

.outline-h3 {
    counter-reset: h4 h5 h6;
}

.outline-h4 {
    counter-reset: h5 h6;
}

.outline-h5 {
    counter-reset: h6;
}

/* 一级标题显示序号 */
.outline-h1>.outline-item>.outline-label:before {
    counter-increment: h1;
    content: counter(h1) ". ";
}

.outline-h2>.outline-item>.outline-label:before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) ". ";
}

.outline-h3>.outline-item>.outline-label:before {
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) ". ";
}

.outline-h4>.outline-item>.outline-label:before {
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
}

.outline-h5>.outline-item>.outline-label:before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
}

.outline-h6>.outline-item>.outline-label:before {
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
}

/**************************************
 * 覆盖焦点标题的默认样式
 **************************************/
#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;
}

代码二：一级标题不显示序号

点击查看代码

/**************************************
 * Header Counters in TOC (目录中的标题计数器)
 **************************************/
.md-toc-inner {
    text-decoration: none;
}

/* 在TOC根目录初始化所有计数器 */
.md-toc-content {
    counter-reset: h1toc h2toc h3toc h4toc h5toc h6toc;
}

.md-toc-h1 {
    margin-left: 0;
    font-size: 1.5rem;
    counter-reset: h2toc h3toc h4toc h5toc h6toc; /* 重置所有下级计数器 */
}

.md-toc-h2 {
    font-size: 1.1rem;
    margin-left: 1.5rem;
    counter-reset: h3toc h4toc h5toc h6toc;
}

.md-toc-h3 {
    margin-left: 3rem;
    font-size: .9rem;
    counter-reset: h4toc h5toc h6toc;
}

.md-toc-h4 {
    margin-left: 4.5rem;
    font-size: .85rem;
    counter-reset: h5toc h6toc;
}

.md-toc-h5 {
    margin-left: 6rem;
    font-size: .8rem;
    counter-reset: h6toc;
}

.md-toc-h6 {
    margin-left: 7.5rem;
    font-size: .75rem;
}

/* 一级标题前不显示序号 */
.md-toc-h1:before {
    display: none;
}

/* 二级标题编号: 只使用自身的 h2toc 计数器 */
.md-toc-h2:before {
    color: black;
    counter-increment: h2toc;
    content: counter(h2toc) ". ";
}

/* 三级标题编号: 使用 h2toc 和 h3toc */
.md-toc-h3:before {
    color: black;
    counter-increment: h3toc;
    content: counter(h2toc) "." counter(h3toc) ". ";
}

/* 四级标题编号: 使用 h2toc, h3toc, h4toc */
.md-toc-h4:before {
    color: black;
    counter-increment: h4toc;
    content: counter(h2toc) "." counter(h3toc) "." counter(h4toc) ". ";
}

/* 五级标题编号: 使用 h2toc, h3toc, h4toc, h5toc */
.md-toc-h5:before {
    color: black;
    counter-increment: h5toc;
    content: counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) ". ";
}

/* 六级标题编号: 使用 h2toc, h3toc, h4toc, h5toc, h6toc */
.md-toc-h6:before {
    color: black;
    counter-increment: h6toc;
    content: counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) "." counter(h6toc) ". ";
}

/**************************************
 * Header Counters in Content (正文中的标题计数器)
 **************************************/

/* 在#write根元素初始化所有计数器，确保即使没有上级标题，计数器也存在 */
#write {
    counter-reset: h1 h2 h3 h4 h5 h6;
}

/* 每个标题元素重置所有下级计数器 */
h1 {
    counter-reset: h2 h3 h4 h5 h6;
}

h2 {
    counter-reset: h3 h4 h5 h6;
}

h3 {
    counter-reset: h4 h5 h6;
}

h4 {
    counter-reset: h5 h6;
}

h5 {
    counter-reset: h6;
}

/* 一级标题前不显示序号 */
#write h1:before {
    display: none;
}

/* 二级标题编号: 只使用自身的 h2 计数器 */
#write h2:before {
    counter-increment: h2;
    content: counter(h2) ". ";
}

/* 三级标题编号: 使用 h2 和 h3 */
#write h3:before,
h3.md-focus.md-heading:before {
    counter-increment: h3;
    content: counter(h2) "." counter(h3) ". ";
}

/* 四级标题编号: 使用 h2, h3, h4 */
#write h4:before,
h4.md-focus.md-heading:before {
    counter-increment: h4;
    content: counter(h2) "." counter(h3) "." counter(h4) ". ";
}

/* 五级标题编号: 使用 h2, h3, h4, h5 */
#write h5:before,
h5.md-focus.md-heading:before {
    counter-increment: h5;
    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
}

/* 六级标题编号: 使用 h2, h3, h4, h5, h6 */
#write h6:before,
h6.md-focus.md-heading:before {
    counter-increment: h6;
    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
}

/**************************************
 * 智能缩进系统 (可选，根据你的需求调整)
 * 使用 CSS 变量方便统一调整
 **************************************/
:root {
    --h1-indent: 0;
    --h2-indent: 1.5rem;
    --h3-indent: 3rem;
    --h4-indent: 4.5rem;
    --h5-indent: 6rem;
    --h6-indent: 7.5rem;
}

/* 基础缩进设置 */
#write h1 {
    margin-left: var(--h1-indent);
    padding-left: 0;
}

#write h2 {
    margin-left: var(--h2-indent);
    padding-left: 0;
}

#write h3 {
    margin-left: var(--h3-indent);
    padding-left: 0;
}

#write h4 {
    margin-left: var(--h4-indent);
    padding-left: 0;
}

#write h5 {
    margin-left: var(--h5-indent);
    padding-left: 0;
}

#write h6 {
    margin-left: var(--h6-indent);
    padding-left: 0;
}

/**************************************
 * 侧边栏大纲编号 (可选)
 **************************************/
.sidebar-content {
    counter-reset: h1 h2 h3 h4 h5 h6;
}

.outline-h1 {
    counter-reset: h2 h3 h4 h5 h6;
}

.outline-h2 {
    counter-reset: h3 h4 h5 h6;
}

.outline-h3 {
    counter-reset: h4 h5 h6;
}

.outline-h4 {
    counter-reset: h5 h6;
}

.outline-h5 {
    counter-reset: h6;
}

.outline-h1>.outline-item>.outline-label:before {
    display: none;
}

.outline-h2>.outline-item>.outline-label:before {
    counter-increment: h2;
    content: counter(h2) ". ";
}

.outline-h3>.outline-item>.outline-label:before {
    counter-increment: h3;
    content: counter(h2) "." counter(h3) ". ";
}

.outline-h4>.outline-item>.outline-label:before {
    counter-increment: h4;
    content: counter(h2) "." counter(h3) "." counter(h4) ". ";
}

.outline-h5>.outline-item>.outline-label:before {
    counter-increment: h5;
    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
}

.outline-h6>.outline-item>.outline-label:before {
    counter-increment: h6;
    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
}

/**************************************
 * 覆盖焦点标题的默认样式
 **************************************/
#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;
}