Typora 标题的自动编号

已于 2022-02-22 11:59:06 修改
阅读量437 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 工具使用 文章标签： css 前端 html
于 2022-02-22 11:58:21 首次发布
原文链接：https://blog.youkuaiyun.com/qq_34626094/article/details/114289462

Typora 标题的自动编号

【Typora】-> 【Perferences】 -> 【Appearance】 中的 Themes 区域块中的 ”Open Theme Folder“ 定位到

实现了标题自动编号、目录自动编号、大纲自动编号的 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) ". "
}

参考

Auto Numbering for Headings

Typora 标题实现自动编号
Mmyan20305的博客
07-21 1940
点击主题可以看到我们自己用到的主题是什么，而在themes文件夹下也有对应的css文件，一般默认使用的是github主题我们就能看到我们默认使用的github.css文件；默认Typora的标题是没有编号的，但是可以通过修改themes的css文件实现这一功能，其实Typora相当于一个浏览器，可以通过调试css和html代码修改页面展示。实现目标是通过修改css文件，css的路径在你自己电脑安装Typora路径下的themes文件下。对应的css代码在下面，可以根据自己的需求进行选择添加。
typora 标题自动编号
weixin_45871977的博客
07-01 421
typora 标题自动编号
Typora标题自动编号
03-29
使用方法见https://gitee.com/QQ56188788/AutoNumberingHeadingsForTypora
自用Typora样式（自动编号功能）
tcmyxc的博客
04-08 1161
自用Typora样式（自动编号功能） 示例： /** initialize css counter * 从h2开始编号 */ #write { counter-reset: h2 } h1 { text-align:center } h2 { counter-reset: h3 } h3 { counter-reset: h4 } h4 { ...
Typora插件中标题自动编号功能解析
最新发布
gitblog_07869的博客
06-19 407
Typora插件中标题自动编号功能解析 在Typora插件开发中，标题自动编号是一个常见的功能需求。本文将从技术角度深入分析该功能的实现原理和使用方法。 标题编号的默认行为 Typora插件默认采用层级编号机制，但有一个值得注意的特性：默认情况下，编号从二级标题开始。这种设计考虑到了大多数文档的排版习惯，因为一级标题通常作为文档主标题，不需要编号。 启用一级标题编号的方法 如果需要从一级标题开始编...
typora设置标题自动编号
juluwangriyue的博客
06-26 7487
配置前 配置后：1、打开 typora 的主题目录 2、将仓库中的 和 两个文件都拷贝到主题目录中 3、配置完成，重启 typora 文档内容标题就会有自动编号了。参考：https://github.com/lipengzhou/typora-theme-auto-numbering按照上述操作后发现结果如下，看不到左侧的导航栏了，其实是因为typora新版本的原因，在左下角有一个小圆圈，使用来控制显示与隐藏导航栏的，点一下就可以了。 About Themes Auto Numbering for H
Typora图片自动编号（导出也生效）
04-29
一、Typora实现图片自动编号(导出有效) 1.1 图片自动编号实现 为了在Typora中启用图片自动编号，我们需要修改Markdown编辑器的主题CSS文件。一种方法是添加以下代码到主题CSS中： ```css /* 图片自动编号 */ #...
Typora设置标题自动标号
m0_49448331的博客
07-30 2840
Typora由于默认标题无法自动标号，每次编辑时需要手动处理。为实现标题自动编号，需要进行相关操作。
Typora 实现标题自动编号
qinrui_view的博客
08-21 883
，然后在正文中依次使用二级、三级标题等。自动编号是从二级标题开始的。一级标题是主标题，只应该有一个，也不应加上编号。Markdown使用# ## ### #### ##### ###### 可以生成标题,但没有序号.5.使用文本编辑器打开新建的文件,下拉光标到文件最后一行,4.当前路径下粘贴文件,并更改文件名,文件名不能含中文。3.复制目录中自己使用的主题(主题以*.css结尾)7.重启Typora,在外观中选择自己新建的主题。文章必须有主标题，且必须是一级标题“2.选择外观,点击打开主题文件夹。
Typora自动生成标题编号
MyBlog
11-08 461
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:.
Markdown编辑器Typora标题自动编号
whitepu的博客
03-04 653
Typora标题自动编号 正文中的各级标题自动编号 来到Typora的主题文件夹： 打开Typora界面，点击左上角文件 ，偏好设置，外观，打开主题文件夹。 添加一个名为base.user.css的文件，用记事本就可。复制以下内容到文件内。 /** initialize css counter */ #write { counter-reset: h1 } h1 { counter-reset: h2 } h2 { counter-reset: h3 } h3 {
在Typora中实现自动编号
凳子花❀的博客
01-03 1516
要应用上述CSS代码，您需要将其保存为.css文件。打开Typora。前往文件偏好设置外观。点击主题里面的打开主题文件夹按钮。，将上述代码复制进去，保存退出。完成以上设置后，重新打开或新建文档时，您应该可以看到标题已经自动编号了。
typora自动生成标题序号（修改V1.0）
weixin_53592372的博客
03-19 1575
通过修改Typora的css文档，可以自动生成标题序号。
【typora】标题自动编号
qq_41636291的博客
03-15 460
typora标题自动编号
Typora设置标题自动编号
lizhiyuanbest的博客
04-13 648
Typora设置标题自动编号
Typora 设置标题自动编号
Erik_ly的博客
04-04 2323
本文主要介绍 Typora 正文标题、侧边大纲、TOC 标题自动编号的方法。 依次点击 文件 —— 偏好设置 —— 外观 —— 打开主题文件， 在打开的文件夹中增加文件 github.user.css 完整内容如下： body { counter-reset: body; } /* 正文标题自动序号 */ h1 { counter-reset: h1; } h2 { counter-reset: h2; } h3 { counter-reset: h3; }
typora设置自动编号
02-28
### 如何在 Typora 中配置自动编号功能 #### 配置标题自动编号 为了使Typora支持标题的自动编号，可以依据特定的操作流程来完成设置。特性方面涵盖了对不同级别的标题进行有序排列并赋予其相应的序号[^1]。 效果上，在文档中应用了此功能之后，各级别的章节标题会自动生成对应的编号，如`1`, `1.1`, `1.2`等形式展示出来，这有助于提高文章结构清晰度以及阅读体验。 对于具体配置方法而言： - 可参照官方指南中的“Auto-Numbering in TOC”部分来进行目录内的自动编号设定； - 或者通过调整大纲面板选项实现相同目的，即访问“Auto-Numbering Outline panel”。 以上两种方式均能有效地让文档内部各层级标题具备连续性的数字标识。 #### 实现图片自动编号 除了文字内容外，针对文中所插入图像也存在自动化处理方案——借助第三方开发工具达成目标。有一款专门面向Typora用户的插件能够满足此类需求，它允许作者轻松地为每张图配上独一无二且连贯递增的号码标签[^2]。 这款插件不仅限于本地编辑环境内发挥作用；即使当文件转换成其他格式（比如HTML或PDF）时，这些精心编排过的视觉素材依旧保留着原有次序不变的特点[^3]。 安装过程相对简单明了：只需前往指定链接获取最新版本软件包，并依照提示逐步执行相应指令即可完成部署工作。 #### 自定义CSS样式表法 另外一种途径涉及修改应用程序默认主题下的全局样式规则集。具体来说就是定位到存储位置:`C:\Users\用户名\AppData\Roaming\Typora\themes\`下寻找名为`base.user.css`的文件(如果找不到则新建)，接着在此处添加必要的代码片段以激活所需行为模式[^4]。 以下是适用于大多数场景的一段示范代码： ```css /* 启用Markdown渲染引擎内置的支持 */ .markdown-body h1:before, .markdown-body h2:before, .markdown-body h3:before { content: counter(headings) ". "; } .markdown-body h1 {counter-reset: headings;} .markdown-body h2 {counter-increment: headings;} .markdown-body h3 {counter-increment: headings;} ``` 保存更改后记得重新启动程序以便生效新参数设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值