Typora 实现标题自动编号

最新推荐文章于 2024-07-30 16:52:45 发布
最新推荐文章于 2024-07-30 16:52:45 发布
阅读量790 收藏 3
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45834721/article/details/129977286
版权

Typora 实现标题自动编号

1. 介绍

我们期望在输入标题的时候能够自动生成 1. 1.1 1.1.1 这样的序号用于展示，方便协作。
实际上在 Typora 中可以通过添加样式的方式来实现，也就是说在实际的 Markdown 文档中未包含序号，而是工具在渲染的时候根据定义的 CSS 展示的时候，列出对应的标题号。
在这里插入图片描述

2. 实现

可以在样式中目录中添加一个 base.user.css 或者 [theme].user.css 的文件来实现，文件都位于样式的目录中。如果不知道样式目录，可以通过以下菜单获取：
【Typora】-> 【Perferences】 -> 【Appearance】 中的 Themes 区域块中的 ”Open Theme Folder“ 定位到。
将 base.user.css 放入到样式目录后，我们再次运行 Typora 就可以看到完整的相关实现。
在这里插入图片描述

3. base.user.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;
}

/**************************************
 * 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) " "
}
qq_45834721
关注
【typora】标题自动编号
qq_41636291的博客
03-15 361
typora标题自动编号
typora自动生成标题序号（修改V1.0）
weixin_53592372的博客
03-19 1268
通过修改Typora的css文档，可以自动生成标题序号。
Typora标题自动编号
03-29
使用方法见https://gitee.com/QQ56188788/AutoNumberingHeadingsForTypora
自用Typora样式（自动编号功能）
tcmyxc的博客
04-08 1061
自用Typora样式（自动编号功能） 示例： /** initialize css counter * 从h2开始编号 */ #write { counter-reset: h2 } h1 { text-align:center } h2 { counter-reset: h3 } h3 { counter-reset: h4 } h4 { ...
Typora 标题实现自动编号
Mmyan20305的博客
07-21 1111
点击主题可以看到我们自己用到的主题是什么，而在themes文件夹下也有对应的css文件，一般默认使用的是github主题我们就能看到我们默认使用的github.css文件；默认Typora的标题是没有编号的，但是可以通过修改themes的css文件实现这一功能，其实Typora相当于一个浏览器，可以通过调试css和html代码修改页面展示。实现目标是通过修改css文件，css的路径在你自己电脑安装Typora路径下的themes文件下。对应的css代码在下面，可以根据自己的需求进行选择添加。
Typora自动生成标题编号
MyBlog
11-08 403
Typora自动生成标题编号 - 强叔Linux - 博客园 https://www.cnblogs.com/ysuwangqiang/p/11948854.html Typora 标题自动编号 - 知乎 https://zhuanlan.zhihu.com/p/110257979 编辑文件 base.user.css /** initialize css counter */ #write, .sidebar-content,.md-toc-content { counter-reset:.
Typora设置标题自动标号
m0_49448331的博客
07-30 2702
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 标题自动编号
weixin_45871977的博客
07-01 332
typora 标题自动编号
Typora自动生成标题编号（包含从二级标题开始的）
weixin_45798558的博客
03-05 511
体验良好，原链接： https://blog.csdn.net/songrongtao/article/details/108129698
Typora自动生成标题
张家四少
07-06 89
文件，如果没有，手动创建一份,重启Typoar即可将大纲内容进行自动编号。首先选择菜单栏的文件，进入。
Typora标题增加序号
09-09 7153
前言 最近半年以来的的进步，要感谢MarkDown编辑器Typora，如果还不知道啥是MarkDown的同学，你真的是错过了一个很好的学习与进步的工具。 MarkDown MarkDown本身是一种标记语言，你看到的那些技术文档基本都是用它来编写的。 Typora Typora之于MarkDown，由于Idea之于Java，Typora是编辑MarkDown文档的利器，没有之一。 问题描述 回到本...
Typora自动给标题生成序号
hmmnx的博客
05-09 692
Typora自动给标题生成序号 网上找到的方法有一些小bug，在这里给出修复 准备工作 打开Typora，然后依次点击：文件→偏好设置→外观→打开主题文件夹 在该文件夹中创建base.user.css 从一级标题开始 右键编辑css文件，在文件中插入如下内容： /** initialize css counter */ #write, .sidebar-content { counter-reset: h1; } h1, .outline-h1 { counter-reset: h2; }
Typora配置添加标题序号
最新发布
shaonianlanger的博客
07-30 552
点击Typora的文件—>偏好设置–>外观–>打开主题文件夹–>新建一个base.user.css文件。（从一级标题开始编码）（从二级标题开始编码）
Typora大纲序号
m0_51660215的博客
07-16 935
/************************************** * 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; f.
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值