Typora Markdown实现标题自动编号

0. 效果

image.png

1. 打开主题文件夹

  • 文件 --> 偏好设置 --> 外观 --> 打开主题文件夹


    image.png

2. 打开主题文件(以github主题为例子)

  • 打开github.css


    image.png

3. 添加代码

  • 在github.css文件底部添加如下代码,保存后关闭文件
#write h1,
.markdown-section h1 {
    counter-reset: h2;
}

#write h2,
.markdown-section h2 {
    counter-reset: h3;
}

#write h3,
.markdown-section h3 {
    counter-reset: h4;
}

#write h4,
.markdown-section h4 {
    counter-reset: h5;
}

#write h5,
.markdown-section h5 {
    counter-reset: h6;
}

#write h2::before,
.markdown-section h2::before {
    counter-increment: h2;
    content: counter(h2) ". ";
}

#write h3::before,
.markdown-section h3::before {
    counter-increment: h3;
    content: counter(h2) "."counter(h3) " ";
}

#write h4::before,
.markdown-section h4::before {
    counter-increment: h4;
    content: counter(h2) "."counter(h3) "."counter(h4) " ";
}

#write h5::before,
.markdown-section h5::before {
    counter-increment: h5;
    content: none;
}

#write h6::before,
.markdown-section h6::before {
    counter-increment: h6;
    content: none;
}

4. 重新加载主题

  • 重新打开Typora,选择刚才修改的主题,OK啦!


    image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 标题的自动编号 关于在哪里放置这些CSS,请按照添加自定义CSS。 此CSS片段会自动为文章中的所有标题添加编号,...
    大漠白杨JS阅读 14,649评论 0 8
  • Typora与它的主题 Markdown这种格式被许多写作网站支持,简书对于新用户虽然没有将Markdown作为默...
    lumicinta阅读 15,051评论 1 11
  • 背景 文章写作过程中,经常使用图片插入功能,每次需要单张图片逐个插入,费时费力。通过在文章中拆入图片时自动将图片上...
    艳阳天不下雨阅读 3,483评论 0 0
  • # 问题的由来 第一次关注这个标题编号的问题应该回溯到本科毕业论文的时候了,当时还单独涉猎过这个主题,`Word`...
    淼焱洞见阅读 5,814评论 0 0
  • 背景 Typora是一个WYSIWYG(所见即所得)的Markdown编辑器,十分好用。此处省略1万字推荐功能介绍...
    AlienPaul阅读 9,421评论 0 8