第Typora自動(dòng)編號(hào)的具體操作在使用Typora寫比較長(zhǎng)的文章時(shí)，需要給章節(jié)編號(hào)，方便區(qū)分層次。如果手動(dòng)編號(hào)，一旦章節(jié)順序改變，很多章節(jié)的編號(hào)都需要一一手動(dòng)修改，極其麻煩。

Typora官方提供了自動(dòng)編號(hào)的方法：https://support.typora.io/Auto-Numbering/。本文將對(duì)官方提供的方法，以及簡(jiǎn)單改進(jìn)進(jìn)行介紹。

這個(gè)方法的原理是，Typora基于瀏覽器開發(fā)（使用快捷鍵Shift+F12可以打開開發(fā)者工具）。因此，可以利用CSS實(shí)現(xiàn)自動(dòng)編號(hào)。

打開Typora-文件-偏好設(shè)置-外觀-打開主題文件夾。

在主題文件夾下新建文件base.user.css。

將https://support.typora.io/Auto-Numbering/中提供的三份代碼（分別實(shí)現(xiàn)文章內(nèi)容自動(dòng)編號(hào)、TOC自動(dòng)編號(hào)、側(cè)邊欄大綱自動(dòng)編號(hào)）復(fù)制到base.user.css中。

重啟Typora。

官方提供的代碼會(huì)對(duì)一級(jí)標(biāo)題進(jìn)行編號(hào)，但實(shí)際寫文章時(shí)，一級(jí)標(biāo)題往往是文章標(biāo)題，無需編號(hào)，因此，我對(duì)代碼進(jìn)行了簡(jiǎn)單修改。下面是修改后的代碼：

文章內(nèi)容自動(dòng)編號(hào)：

/**initializecsscounter*/

counter-reset:h2

counter-reset:h3

counter-reset:h4

counter-reset:h5

counter-reset:h6

/**putcounterresultintoheadings*/

#writeh2:before{

counter-increment:h2;

content:counter(h2)"."

#writeh3:before,

h3.md-focus.md-heading:before/**overridethedefaultstyleforfocusedheadings*/{

counter-increment:h3;

content:counter(h2)"."counter(h3)"."

#writeh4:before,

h4.md-focus.md-heading:before{

counter-increment:h4;

content:counter(h2)"."counter(h3)"."counter(h4)"."

#writeh5:before,

h5.md-focus.md-heading:before{

counter-increment:h5;

content:counter(h2)"."counter(h3)"."counter(h4)"."counter(h5)"."

#writeh6:before,

h6.md-focus.md-heading:before{

counter-increment:h6;

content:counter(h2)"."counter(h3)"."counter(h4)"."counter(h5)"."counter(h6)"."

/**overridethedefaultstyleforfocusedheadings*/

#writeh3.md-focus:before,

#writeh4.md-focus:before,

#writeh5.md-focus:before,

#writeh6.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;

}

TOC自動(dòng)編號(hào)：

/*NolinkunderlinesinTOC*/

.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;

側(cè)邊欄大綱自動(dòng)編號(hào)：

.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)