Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about the specific operation of Typora automatic numbering. The article is rich in content and analyzed and described from a professional point of view. I hope you can get something after reading this article.

Overview

When using Typora to write longer articles, you need to number the chapters to make it easier to distinguish between levels. If manual numbering, once the order of chapters is changed, the numbering of many chapters need to be manually modified one by one, which is extremely troublesome.

Typora officially provides an automatic numbering method: https://support.typora.io/Auto-Numbering/. The editor will introduce the official methods and simple improvements.

Principle

The principle of this approach is that Typora is based on browser development (developers' tools can be opened by using the shortcut key Shift+F12). Therefore, you can use CSS to achieve automatic numbering.

Concrete operation

Open Typora-> Files-> preferences-> appearance-> Open the theme folder.

Create a new file base.user.css under the theme folder.

Copy the three codes provided in https://support.typora.io/Auto-Numbering/ (automatic numbering of article content, automatic numbering of TOC, automatic numbering of sidebar outline) to base.user.css.

Restart Typora.

Improve

The official code will number the first-level title, but when actually writing an article, the first-level title is often the title of the article, without numbering, so I made a simple change to the code. The following is the modified code:

Automatic numbering of article content:

/ * * initialize css counter * / h2 {counter-reset: H3} h3 {counter-reset: H4} h4 {counter-reset: H5} h5 {counter-reset: H6} h6 {counter-reset: H7} / * * put counter result into headings * / # write h3:before {counter-increment: h3; content: counter (h3) ". "} # write h4chow beforehand language h4.md override the default style for focused headings focus. MDMZ heading before / * * override the default style for focused headings * / {counter-increment: h4; content: counter (h3)". " Counter (h4) "." # write h5 content beforehand h5. MDF: counter (h3) "." Counter (h4) ". Counter (h5) "." # write h6 content beforehand h6. MDF: counter (h3) "." Counter (h4) ". Counter (h5) ". Counter (h6) "." # write h7 content beforehand h7. MDF: counter (h3) "." Counter (h4) ". Counter (h5) ". Counter (H6) "." Counter (H7) ". "} / * * override the default style for focused headings * / # write > h4.mdfurouslu beforefront beforehandwriting > h5.mdFufufuzhuo beforeforehandwriting > h6.mdFufengfuzhuo beforehandwriting > h7.mdFOUOWOU beforeforeLines h4.mdFOOUTH: 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 automatic numbering:

/ * No link underlines in TOC * / .md-toc-inner {text-decoration: none;} .md-toc-h2 {margin-left: 0; font-size: 1.5remm; counter-reset: h3toc} .md-toc-h3 {font-size: 1.1rem; margin-left: 2rem; counter-reset: h4toc} .md-toc-h4 {margin-left: 3remm; font-size: .9rem Counter-reset: h5toc} .md-toc-h5 {margin-left: 4remm; font-size: .85rem; counter-reset: h6toc} .md-toc-h6 {margin-left: 5rem; font-size: .8rem; counter-reset: h7toc} .md-toc-h7 {margin-left: 6remm; font-size: .75rem;} .md-toc-h3:before {color: black; counter-increment: h3toc Content: counter (h3toc) ". "} .md-toc-h3 .md-toc-inner {margin-left: 0;} .md-toc-h4:before {color: black; counter-increment: h4toc; content: counter (h3toc)". " Counter (h4toc) "."} .md-toc-h4 .md-toc-inner {margin-left: 0;} .md-toc-h5:before {color: black; counter-increment: h5toc; content: 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 (h3toc) "." Counter (h4toc) "." Counter (h5toc) "." Counter (h6toc) "."} .md-toc-h6 .md-toc-inner {margin-left: 0;} .md-toc-h7:before {color: black; counter-increment: h7toc; content: counter (h3toc) "." Counter (h4toc) "." Counter (h5toc) "." Counter (h6toc) "." Counter (h7toc) "."} .md-toc-h7 .md-toc-inner {margin-left: 0;}

Sidebar outline automatic numbering:

. outline-h2 {counter-reset: H3}. Outline-h3 {counter-reset: H4}. Outline-h4 {counter-reset: H5}. Outline-h5 {counter-reset: H6}. Outline-h6 {counter-reset: H7}. Outline-h3 > .duration-item > .outline-label:before {counter-increment: h3; content: counter (h3) ". "}. Outline-h4 > .outline-item > .outline-label:before {counter-increment: H4; content: counter (H3)". " Counter (h4) "."}. Outline-h5 > .outline-item > .outline-label:before {counter-increment: H5; content: counter (h3) "." Counter (h4) ". Counter (h5) "."}. Outline-h6 > .outline-item > .outline-label:before {counter-increment: H6; content: counter (h3) ". Counter (h4) ". Counter (h5) ". Counter (h6) "."}. Outline-h7 > .outline-item > .outline-label:before {counter-increment: H7; content: counter (h3) ". Counter (h4) ". Counter (h5) ". Counter (H6) "." Counter (H7) "."}

Effect picture

The above is the specific operation of the Typora automatic numbering shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.