Typora 标题实现自动编号

于 2024-07-21 11:17:04 发布
阅读量447 收藏 11
点赞数 3
文章标签： 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mmyan20305/article/details/140585151
版权

文章目录

Typora 标题实现自动编号（目录+大纲）

默认Typora的标题是没有编号的，但是可以通过修改themes的css文件实现这一功能，其实Typora相当于一个浏览器，可以通过调试css和html代码修改页面展示。

同时修改标题的方法同样可以服复用到大纲和目录上。

  • 什么是大纲和目录？
    • 大纲：在视图中可以调出大纲也就是根据文件的标题级别生成出来的。
    • 目录：通过[TOC] + 回车 可以在文件任何位置生成一个该文件目录。
      在这里插入图片描述
      在这里插入图片描述

找到修改位置

实现目标是通过修改css文件，css的路径在你自己电脑安装Typora路径下的themes文件下。
如果找不到，也可以通过偏好设置 -> 打开主题文件夹，找到对应的路径。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

添加文件

点击主题可以看到我们自己用到的主题是什么，而在themes文件夹下也有对应的css文件，一般默认使用的是github主题我们就能看到我们默认使用的github.css文件；那么我们就在themes文件夹下新建一个github.user.css 文件，在里面添加对应的css代码使功能生效。

对应的css代码在下面，可以根据自己的需求进行选择添加。
在这里插入图片描述

在这里插入图片描述

重启生效

将所有的Typora关闭，重新打开就可以生效了；
如果没有生效可以试试重启电脑，还是没有生效查看一下themes文件夹是否保存成功添加的css文件。

①是生效的大纲序号、②是没有添加序号功能的目录

在这里插入图片描述

CSS 代码

一级标题自动生产序号

/** initialize css counter */
#write {
    counter-reset: h1
}

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 h1:before {
    counter-increment: h1;
    content: counter(h1) ". "
}

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

#write h3:before,
h3.md-focus.md-heading:before /** override the default style for focused headings */ {
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) ". "
}

#write h4:before,
h4.md-focus.md-heading:before {
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}

#write h5:before,
h5.md-focus.md-heading:before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}

#write h6:before,
h6.md-focus.md-heading:before {
    counter-increment: h6;
    content: counter(h1) "." 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;
}

从二级标题生产序号

/** initialize css counter */
.outline-h1,
h1 {
    counter-reset: h2;
}

.outline-h2,
h2 {
    counter-reset: h3;
}

.outline-h3,
h3 {
    counter-reset: h4;
}

.outline-h4,
h4 {
    counter-reset: h5;
}

.outline-h5,
h5 {
    counter-reset: h6;
}

#write h2:before,
.outline-h2 > .outline-item > .outline-label:before {
    counter-increment: h2;
    content: counter(h2) " ";
}

#write h3:before,
h3.md-focus.md-heading:before, /** override the default style for focused headings */
.outline-h3 > .outline-item > .outline-label:before {
    counter-increment: h3;
    content: counter(h2) "." counter(h3) " ";
}

#write h4:before,
h4.md-focus.md-heading:before,
.outline-h4 > .outline-item > .outline-label:before {
    counter-increment: h4;
    content: counter(h2) "." counter(h3) "." counter(h4) " ";
}

#write h5:before,
h5.md-focus.md-heading:before,
.outline-h5 > .outline-item > .outline-label:before {
    counter-increment: h5;
    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " ";
}

#write h6:before,
h6.md-focus.md-heading:before,
.outline-h6 > .outline-item > .outline-label: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;
}

TOC目录生产序号

/**************************************
 * Header Counters in TOC
 **************************************/
 
/* No link underlines in TOC */
.md-toc-inner {
    text-decoration: none;
}
 
.md-toc-content {
    counter-reset: h1toc
}
 
.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-h1:before {
    color: black;
    counter-increment: h1toc;
    content: counter(h1toc) ". "
}
 
.md-toc-h1 .md-toc-inner {
    margin-left: 0;
}
 
.md-toc-h2:before {
    color: black;
    counter-increment: h2toc;
    content: counter(h1toc) ". " counter(h2toc) ". "
}
 
.md-toc-h2 .md-toc-inner {
    margin-left: 0;
}
 
.md-toc-h3:before {
    color: black;
    counter-increment: h3toc;
    content: counter(h1toc) ". " counter(h2toc) ". " counter(h3toc) ". "
}
 
.md-toc-h3 .md-toc-inner {
    margin-left: 0;
}
 
.md-toc-h4:before {
    color: black;
    counter-increment: h4toc;
    content: counter(h1toc) ". " 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(h1toc) ". " 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(h1toc) ". " counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc) ". " counter(h6toc) ". "
}
 
.md-toc-h6 .md-toc-inner {
    margin-left: 0;
}
 
/**************************************
 * Header Counters in Content
 **************************************/
 
/** initialize css counter */
#write {
    counter-reset: h1
}
 
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 h1:before {
    counter-increment: h1;
    content: counter(h1) ". "
}
 
#write h2:before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) ". "
}
 
#write h3:before, h3.md-focus.md-heading:before { /*override the default style for focused headings */
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) ". "
}
 
#write h4:before, h4.md-focus.md-heading:before {
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}
 
#write h5:before, h5.md-focus.md-heading:before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}
 
#write h6:before, h6.md-focus.md-heading:before {
    counter-increment: h6;
    content: counter(h1) "." 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;
}

大纲生成序号

.sidebar-content {
    counter-reset: h1
}
 
.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-h1>.outline-item>.outline-label:before {
    counter-increment: h1;
    content: counter(h1) ". "
}
 
.outline-h2>.outline-item>.outline-label:before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) ". "
}
 
.outline-h3>.outline-item>.outline-label:before {
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) ". "
}
 
.outline-h4>.outline-item>.outline-label:before {
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}
 
.outline-h5>.outline-item>.outline-label:before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}
 
.outline-h6>.outline-item>.outline-label:before {
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/9d441be5ffc7418aa84c6e16a8e86069.png#pic_center)

;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}
 
.outline-h5>.outline-item>.outline-label:before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}
 
.outline-h6>.outline-item>.outline-label:before {
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}
盐...
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Typora标题自动编号
03-29
使用方法见https://gitee.com/QQ56188788/AutoNumberingHeadingsForTypora
Typora 最佳主题
12-11
该文档是在github主题基础上，做的一些改动，增加了暗色代码背景，调整了文档的字体、大标题、表格以及重点文字的颜色，使得写出的文档更加的美观。并且我对这个主题中的一些常用代码做了注释，喜欢的朋友可以根据自己的喜好做出相应的调整。
Typora如何实现文档的自动编号设置
Howietron的博客
10-08 1217
当编写文档的时候希望编译器能够自动根据标题样式按顺序编号，不需要用户自行添加相应标题。这样也方便用户随时更新文档时候不会因为修改了某个编号而要去修改其它的编号以符合自然顺序，以下分别针对大纲、目录、正文实现自动编号。需要注意的是，。
Typora自动添加标题序号
最新发布
weixin_46191137的博客
06-07 551
文件-偏好设置-外观，点击打开主题文件夹在这里插入图片描述。
设置typora标题、目录、大纲自动编号
一生之酉的博客
03-21 8533
设置typora文章标题、目录、大纲自动编号
typora自动生成标题序号（修改V1.0）
weixin_53592372的博客
03-19 1032
通过修改Typora的css文档，可以自动生成标题序号。
自用Typora样式（自动编号功能）
tcmyxc的博客
04-08 1011
自用Typora样式（自动编号功能） 示例： /** initialize css counter * 从h2开始编号 */ #write { counter-reset: h2 } h1 { text-align:center } h2 { counter-reset: h3 } h3 { counter-reset: h4 } h4 { ...
typora设置标题自动编号
juluwangriyue的博客
06-26 6425
配置前 配置后：1、打开 typora 的主题目录 2、将仓库中的 和 两个文件都拷贝到主题目录中 3、配置完成，重启 typora 文档内容标题就会有自动编号了。参考：https://github.com/lipengzhou/typora-theme-auto-numbering按照上述操作后发现结果如下，看不到左侧的导航栏了，其实是因为typora新版本的原因，在左下角有一个小圆圈，使用来控制显示与隐藏导航栏的，点一下就可以了。 About Themes Auto Numbering for H
Typora设置标题自动标号
m0_49448331的博客
07-30 2639
Typora由于默认标题无法自动标号，每次编辑时需要手动处理。为实现标题自动编号，需要进行相关操作。
Typora自动编号
xnightmare的博客
08-22 1560
文章目录概述原理具体操作改进效果图 概述 在使用Typora写比较长的文章时，需要给章节编号，方便区分层次。如果手动编号，一旦章节顺序改变，很多章节的编号都需要一一手动修改，极其麻烦。 Typora官方提供了自动编号的方法：https://support.typora.io/Auto-Numbering/。本文将对官方提供的方法，以及简单改进进行介绍。 原理 这个方法的原理是，Typora基于浏览器开发（使用快捷键Shift+F12可以打开开发者工具），因此，可以利用CSS实现自动编号。 具体操作 打开T
Typora 标题的自动编号
dwh0403的专栏
09-13 196
1. 介绍 工欲善其事必先利其器，最近虽然重度使用 Typora 工具，但是突然发现很多功能还未能够实现自动化，比如标题自动编号的功能。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JJ9MqyXt-1631537212638)(https://www.ebpf.top/imgs/typora_cnt_autonumber.png)] 我们期望在输入标题的时候能够自动生成 1. 1.1 1.1.1 这样的序号用于展示，方便协作。 实际上在 Typora 中可以通过添加样式的
Typora 主题
10-11
结合其他的主题进行修改后的Typora主题，和马克飞象相似
Typora图片自动编号（导出也生效）
04-29
1.1 图片自动编号实现 为了在Typora中启用图片自动编号，我们需要修改Markdown编辑器的主题CSS文件。一种方法是添加以下代码到主题CSS中： ```css /* 图片自动编号 */ #write { counter-increment: imgNum 0; } ...
markdown文件中标题的序列号自动生成（非typora插件）
11-13
在描述中提到的“markdown文件中标题的序列号自动生成”是指在不依赖Typora这样的特定编辑器插件的情况下，实现Markdown标题自动编号的功能。这里我们将探讨如何在Java环境下，利用JDK 1.8来实现这一功能。 JDK 1.8...
typora-update-x64-1117.rar
12-15
6. **图片上传**：Typora支持直接拖放图片到文档中，甚至可以配置自动上传至云端服务，如GitHub或Imgur，方便分享和备份。 7. **表格和数学公式**：Typora支持创建和编辑表格，以及使用LaTeX语法插入复杂的数学公式...
Typora开发记录工具
05-05
在Typora中，你可以轻松地使用Markdown语法来创建标题、列表、引用、代码块等。例如： - 一级标题：`# 一级标题` - 二级标题：`## 二级标题` - 列表：`- 列表项1` 或 `1. 编号列表项` - 引用：`> 引用内容` ### 2....
Typora 实现标题自动编号
qq_45834721的博客
04-05 679
我们期望在输入标题的时候能够自动生成 1. 1.1 1.1.1 这样的序号用于展示，方便协作。实际上在 Typora 中可以通过添加样式的方式来实现，也就是说在实际的 Markdown 文档中未包含序号，而是工具在渲染的时候根据定义的 CSS 展示的时候，列出对应的标题号。
Typora使用技巧：自动编号、常用快捷键等
lc2288的博客
09-27 8929
Typora使用技巧：自动编号、常用快捷键等
typora自动生成标题序号/左侧大纲区域无下拉箭头（修改V1.0）
sangyongqi的博客
05-28 296
2.如果没有base.user.css文件，新建一个。如果有直接用记事本打开，把下面代码拷贝进去。3.如果没有github.css文件，新建一个。如果有直接用记事本打开，把下面代码拷贝进去。1.进入文件夹：文件–>偏好设置–>外观–>主题–>打开主题文件夹。4.重新打开typora软件生，再新建标题就有序号了。
typora自动编号
09-27
Typora提供了自动编号的功能，您可以通过以下步骤进行设置： 1. 打开Typora，并点击菜单栏上的【文件】。 2. 在下拉菜单中选择【偏好设置】。 3. 在偏好设置窗口中，点击【外观】选项卡。 4. 在外观选项卡中，点击【打开主题文件夹】。 5. 在主题文件夹中，新建一个名为base.user.css的文件。 6. 打开https://support.typora.io/Auto-Numbering/，并将页面上提供的代码复制到base.user.css文件中（分别实现文章内容自动编号、TOC自动编号、侧边栏大纲自动编号）。 7. 重启Typora。 以上就是设置Typora自动编号的步骤。您可以按照这些步骤进行操作，以实现自动编号的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值