在Typora中实现自动编号

文章目录

- - 在Typora中实现自动编号
  - - 1. 引言
    - 2. 准备工作
    - 3. 自动编号的实现
    - - 3.1 文章大纲自动编号
      - 3.2 主题目录（TOC）自动编号
      - 3.3 文章内容自动编号
      - 3.4 完整代码
    - 4. 应用自定义CSS
    - 5. 结论

在Typora中实现自动编号

1. 引言

Typora是一款非常流行的Markdown编辑器，以其简洁直观的界面而闻名。尽管它默认不提供对标题自动编号的支持，但通过自定义CSS，我们可以轻松地为我们的文档添加这一功能。本篇文章将展示如何设置自动编号，使得文章结构更加清晰，有助于读者快速定位到感兴趣的部分。

2. 准备工作

在开始之前，请确保您已经下载并安装了Typora。此外，您还需要了解一些基本的CSS知识，因为我们将通过自定义CSS来实现自动编号。为了使这些样式生效，您需要确保Typora启用了“使用自定义CSS”选项，并且您的CSS文件正确加载。

3. 自动编号的实现

3.1 文章大纲自动编号

首先，我们需要为文章的大纲添加自动编号。这可以通过以下完整的CSS代码片段来完成：

/*文章大纲自动编号*/
.outline-h1 {counter-reset: h2;
}.outline-h2 {counter-reset: h3;
}.outline-h3 {counter-reset: h4;
}.outline-h4 {counter-reset: h5;
}.outline-h5 {counter-reset: h6;
}.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) " ";
}

这段代码会为每个标题级别创建一个计数器，并在每个标题前显示相应的编号。

3.2 主题目录（TOC）自动编号

接下来，我们为生成的主题目录添加自动编号。这是通过以下完整的CSS规则实现的：

/*文章主题目录自动编号*/
/* No link underlines in TOC */
.md-toc-inner {text-decoration: none;
}.md-toc-h1 {margin-left: 0;font-size: 1.5rem;counter-reset: h2toc;
}.md-toc-h2 {font-size: 1.1rem;margin-left: 2rem;counter-reset: h3toc;
}.md-toc-h3 {margin-left: 3rem;font-size: .9rem;counter-reset: h4toc;
}.md-toc-h4 {margin-left: 4rem;font-size: .85rem;counter-reset: h5toc;
}.md-toc-h5 {margin-left: 5rem;font-size: .8rem;counter-reset: h6toc;
}.md-toc-h6 {margin-left: 6rem;font-size: .75rem;
}.md-toc-h2:before {color: black;counter-increment: h2toc;content: counter(h2toc) ". ";
}.md-toc-h2 .md-toc-inner {margin-left: 0;
}.md-toc-h3:before {color: black;counter-increment: h3toc;content: counter(h2toc) ". " counter(h3toc) " ";
}.md-toc-h3 .md-toc-inner {margin-left: 0;
}.md-toc-h4:before {color: black;counter-increment: h4toc;content: counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) " ";
}.md-toc-h4 .md-toc-inner {margin-left: 0;
}.md-toc-h5:before {color: black;counter-increment: h5toc;content: counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc) " ";
}.md-toc-h5 .md-toc-inner {margin-left: 0;
}.md-toc-h6:before {color: black;counter-increment: h6toc;content: counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc) ". " counter(h6toc) " ";
}.md-toc-h6 .md-toc-inner {margin-left: 0;
}

此段代码同样为TOC中的每个标题设置了计数器，并在每个条目前添加了编号。

3.3 文章内容自动编号

最后，我们希望正文中的标题也能够自动编号。下面的完整CSS代码可以满足这个需求：

/*文章内容自动编号*/
/** initialize css counter */
h1 {counter-reset: h2;
}h2 {counter-reset: h3;
}h3 {counter-reset: h4;
}h4 {counter-reset: h5;
}h5 {counter-reset: h6;
}/** put counter result into headings */
#write h2:before {counter-increment: h2;content: counter(h2) ". ";
}#write h3:before,
h3.md-focus.md-heading:before /** override the default style for focused headings */ {counter-increment: h3;content: counter(h2) "." counter(h3) " ";
}#write h4:before,
h4.md-focus.md-heading:before {counter-increment: h4;content: counter(h2) "." counter(h3) "." counter(h4) " ";
}#write h5:before,
h5.md-focus.md-heading:before {counter-increment: h5;content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " ";
}#write h6:before,
h6.md-focus.md-heading:before {counter-increment: h6;content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) " ";
}/** override the default style for focused headings */
#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;
}

这些规则确保了正文中的标题也会按照大纲顺序进行编号。

3.4 完整代码

/*文章大纲自动编号*/
.outline-h1 {counter-reset: h2
}.outline-h2 {counter-reset: h3
}.outline-h3 {counter-reset: h4
}.outline-h4 {counter-reset: h5
}.outline-h5 {counter-reset: h6
}.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) " "
}/*文章主题目录自动编号*/
/* No link underlines in TOC */
.md-toc-inner {text-decoration: none;
}.md-toc-h1 {margin-left: 0;font-size: 1.5rem;counter-reset: h2toc
}.md-toc-h2 {font-size: 1.1rem;margin-left: 2rem;counter-reset: h3toc
}.md-toc-h3 {margin-left: 3rem;font-size: .9rem;counter-reset: h4toc
}.md-toc-h4 {margin-left: 4rem;font-size: .85rem;counter-reset: h5toc
}.md-toc-h5 {margin-left: 5rem;font-size: .8rem;counter-reset: h6toc
}.md-toc-h6 {margin-left: 6rem;font-size: .75rem;
}.md-toc-h2:before {color: black;counter-increment: h2toc;content: counter(h2toc) ". "
}.md-toc-h2 .md-toc-inner {margin-left: 0;
}.md-toc-h3:before {color: black;counter-increment: h3toc;content: counter(h2toc) ". " counter(h3toc) " "
}.md-toc-h3 .md-toc-inner {margin-left: 0;
}.md-toc-h4:before {color: black;counter-increment: h4toc;content: counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) " "
}.md-toc-h4 .md-toc-inner {margin-left: 0;
}.md-toc-h5:before {color: black;counter-increment: h5toc;content: counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc) " "
}.md-toc-h5 .md-toc-inner {margin-left: 0;
}.md-toc-h6:before {color: black;counter-increment: h6toc;content: counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc) ". " counter(h6toc) " "
}.md-toc-h6 .md-toc-inner {margin-left: 0;
} /*文章内容自动编号*/
/** initialize css counter */
h1 {counter-reset: h2
}h2 {counter-reset: h3
}h3 {counter-reset: h4
}h4 {counter-reset: h5
}h5 {counter-reset: h6
}/** put counter result into headings */
#write h2:before {counter-increment: h2;content: counter(h2) ". "
}#write h3:before,
h3.md-focus.md-heading:before /** override the default style for focused headings */ {counter-increment: h3;content: counter(h2) "." counter(h3) " "
}#write h4:before,
h4.md-focus.md-heading:before {counter-increment: h4;content: counter(h2) "." counter(h3) "." counter(h4) " "
}#write h5:before,
h5.md-focus.md-heading:before {counter-increment: h5;content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " "
}#write h6:before,
h6.md-focus.md-heading:before {counter-increment: h6;content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) " "
}/** override the default style for focused headings */
#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;
}