typora 标题自动加编号

typora 标题自动加编号


目录

• typora 标题自动加编号
  
  
  
  • 新建样式
    
  • 导入我修改好的 css
    
  • enjoy
    
  
  

网上看了挺多其他复制粘贴的方法，但是缺点都是第一级 h1 ,都算进去了
按照规范的 markdown 规范，一个 md 文件中只能出现一个 h1,就是标题
所以最大的编号应该就是 h2,所以我拿来改了一下
新建样式

在 Typora\themes 目录下,新建一个base.user.css文件
导入我修改好的 css

已经集成了 标题自动编号, TOC 目录自动编号, 左侧导航栏自动编号
编号默认从 h2 开始计算

1. /** initialize css counter */
2. #write {
3.     counter-reset: h1
4. }
6. h1 {
7.     counter-reset: h2
8. }
10. h2 {
11.     counter-reset: h3
12. }
14. h3 {
15.     counter-reset: h4
16. }
18. h4 {
19.     counter-reset: h5
20. }
22. h5 {
23.     counter-reset: h6
24. }
26. /** put counter result into headings */
27. #write h2:before {
28.     counter-increment: h2;
29.     content: counter(h2) ". "
30. }
32. #write h3:before,
33. h3.md-focus.md-heading:before /** override the default style for focused headings */ {
34.     counter-increment: h3;
35.     content: counter(h2) "." counter(h3) ". "
36. }
38. #write h4:before,
39. h4.md-focus.md-heading:before {
40.     counter-increment: h4;
41.     content: counter(h2) "." counter(h3) "." counter(h4) ". "
42. }
44. #write h5:before,
45. h5.md-focus.md-heading:before {
46.     counter-increment: h5;
47.     content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
48. }
50. #write h6:before,
51. h6.md-focus.md-heading:before {
52.     counter-increment: h6;
53.     content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
54. }
56. /** override the default style for focused headings */
57. #write>h3.md-focus:before,
58. #write>h4.md-focus:before,
59. #write>h5.md-focus:before,
60. #write>h6.md-focus:before,
61. h3.md-focus:before,
62. h4.md-focus:before,
63. h5.md-focus:before,
64. h6.md-focus:before {
65.     color: inherit;
66.     border: inherit;
67.     border-radius: inherit;
68.     position: inherit;
69.     left:initial;
70.     float: none;
71.     top:initial;
72.     font-size: inherit;
73.     padding-left: inherit;
74.     padding-right: inherit;
75.     vertical-align: inherit;
76.     font-weight: inherit;
77.     line-height: inherit;
78. }
80. /**************************************
81. * Header Counters in TOC
82. **************************************/
84. /* No link underlines in TOC */
85. .md-toc-inner {
86.     text-decoration: none;
87. }
89. .md-toc-content {
90.     counter-reset: h1toc
91. }
93. .md-toc-h1 {
94.     margin-left: 0;
95.     font-size: 1.5rem;
96.     counter-reset: h2toc
97. }
99. .md-toc-h2 {
100.     font-size: 1.1rem;
101.     margin-left: 2rem;
102.     counter-reset: h3toc
103. }
105. .md-toc-h3 {
106.     margin-left: 3rem;
107.     font-size: .9rem;
108.     counter-reset: h4toc
109. }
111. .md-toc-h4 {
112.     margin-left: 4rem;
113.     font-size: .85rem;
114.     counter-reset: h5toc
115. }
117. .md-toc-h5 {
118.     margin-left: 5rem;
119.     font-size: .8rem;
120.     counter-reset: h6toc
121. }
123. .md-toc-h6 {
124.     margin-left: 6rem;
125.     font-size: .75rem;
126. }
128. .md-toc-h2:before {
129.     counter-increment: h2toc;
130.     content: counter(h2toc) ". "
131. }
133. .md-toc-h2 .md-toc-inner {
134.     margin-left: 0;
135. }
137. .md-toc-h3:before {
138.     counter-increment: h3toc;
139.     content: counter(h2toc) ". " counter(h3toc) ". "
140. }
142. .md-toc-h3 .md-toc-inner {
143.     margin-left: 0;
144. }
146. .md-toc-h4:before {
147.     counter-increment: h4toc;
148.     content: counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". "
149. }
151. .md-toc-h4 .md-toc-inner {
152.     margin-left: 0;
153. }
155. .md-toc-h5:before {
156.     counter-increment: h5toc;
157.     content: counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc) ". "
158. }
160. .md-toc-h5 .md-toc-inner {
161.     margin-left: 0;
162. }
164. .md-toc-h6:before {
165.     counter-increment: h6toc;
166.     content: counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc) ". " counter(h6toc) ". "
167. }
169. .md-toc-h6 .md-toc-inner {
170.     margin-left: 0;
171. }
173. /**************************************
174. * Header Counters in Content
175. **************************************/
177. /** initialize css counter */
178. #write {
179.     counter-reset: h1
180. }
182. h1 {
183.     counter-reset: h2
184. }
186. h2 {
187.     counter-reset: h3
188. }
190. h3 {
191.     counter-reset: h4
192. }
194. h4 {
195.     counter-reset: h5
196. }
198. h5 {
199.     counter-reset: h6
200. }
202. /** put counter result into headings */
204. #write h2:before {
205.     counter-increment: h2;
206.     content: counter(h2) ". "
207. }
209. #write h3:before, h3.md-focus.md-heading:before { /*override the default style for focused headings */
210.     counter-increment: h3;
211.     content: counter(h2) "." counter(h3) ". "
212. }
214. #write h4:before, h4.md-focus.md-heading:before {
215.     counter-increment: h4;
216.     content: counter(h2) "." counter(h3) "." counter(h4) ". "
217. }
219. #write h5:before, h5.md-focus.md-heading:before {
220.     counter-increment: h5;
221.     content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
222. }
224. #write h6:before, h6.md-focus.md-heading:before {
225.     counter-increment: h6;
226.     content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
227. }
229. /** override the default style for focused headings */
230. #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 {
231.     color: inherit;
232.     border: inherit;
233.     border-radius: inherit;
234.     position: inherit;
235.     left: initial;
236.     float: none;
237.     top: initial;
238.     font-size: inherit;
239.     padding-left: inherit;
240.     padding-right: inherit;
241.     vertical-align: inherit;
242.     font-weight: inherit;
243.     line-height: inherit;
244. }
246. /* Auto-Numbering Outline panel */
248. .sidebar-content {
249.     counter-reset: h1
250. }
252. .outline-h1 {
253.     counter-reset: h2
254. }
256. .outline-h2 {
257.     counter-reset: h3
258. }
260. .outline-h3 {
261.     counter-reset: h4
262. }
264. .outline-h4 {
265.     counter-reset: h5
266. }
268. .outline-h5 {
269.     counter-reset: h6
270. }
272. .outline-h2>.outline-item>.outline-label:before {
273.     counter-increment: h2;
274.     content: counter(h2) ". "
275. }
277. .outline-h3>.outline-item>.outline-label:before {
278.     counter-increment: h3;
279.     content: counter(h2) "." counter(h3) ". "
280. }
282. .outline-h4>.outline-item>.outline-label:before {
283.     counter-increment: h4;
284.     content: counter(h2) "." counter(h3) "." counter(h4) ". "
285. }
287. .outline-h5>.outline-item>.outline-label:before {
288.     counter-increment: h5;
289.     content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
290. }
292. .outline-h6>.outline-item>.outline-label:before {
293.     counter-increment: h6;
294.     content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
295. }

复制代码

enjoy

然后开始使用
需要注意的是，只有导出 html 的时候才能看得见这个样式，如果是直接复制是无法复制走这个序号的，如果想要复制的时候也有需要请自己写 python 脚本，或者有时间我可能会写一个

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！