Typora设置标题自动标号

已于 2022-08-01 10:05:19 修改
阅读量2.8k 收藏 9
点赞数 4
CC 4.0 BY-SA版权
分类专栏： # MD笔记(Typora/Notion) 文章标签： Typora
于 2022-07-30 17:04:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_49448331/article/details/126074664

Typora由于默认标题无法自动标号，每次编辑时需要手动处理。为实现标题自动编号，需要进行相关操作。

一 官方说明

在这里插入图片描述

To achieve this, add the following to your base.user.css or [theme].user.css in the theme folder.

/** 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;
}

4.1、Auto-Numbering in TOC
If you want TOC entities to be displayed auto-numbered, you could try http://pastebin.com/NYugSbXk posted by a Typora user.
 

/**************************************
 * 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;
}

4.2、Auto-Numbering Outline panel
To show auto-numbering in Typora’s Outline panel, disable the collapsable outline panel in the preferences panel and then try https://pastebin.com/XmYgBbaz.
 

.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) ". "
}

二 具体操作

1 打开主题文件夹

打开typora，先点击“文件”，再点击“偏好设置”，再点击“外观”，最后点击“打开主题文件”来到如下界面。

 

 2 修改主题文件

  • 在此路径下新建“base.user.css”，将上面三份代码复制到到文档里面，保存后退出。

3 重启Typora

三 注意

1. 开始编号标题必须是一级标题格式。否则编号出错

2. 有几个数字代表几级标题。如1.代表一级标题。1.1.1代表三级标题

3. 设置为标题格式后输入内容即可对标题编辑

参考链接

1. typora设置标题自动编号_落花逐流水的博客-优快云博客_typora标题自动编号

2. 设置typora标题、目录、大纲自动编号_MTpanda酉生的博客-优快云博客_typora标题自动编号

Typora 标题实现自动编号
Mmyan20305的博客
07-21 1955
点击主题可以看到我们自己用到的主题是什么，而在themes文件夹下也有对应的css文件，一般默认使用的是github主题我们就能看到我们默认使用的github.css文件；默认Typora的标题是没有编号的，但是可以通过修改themes的css文件实现这一功能，其实Typora相当于一个浏览器，可以通过调试css和html代码修改页面展示。实现目标是通过修改css文件，css的路径在你自己电脑安装Typora路径下的themes文件下。对应的css代码在下面，可以根据自己的需求进行选择添加。
typora自动生成标题序号（修改V1.0）
weixin_53592372的博客
03-19 1585
通过修改Typora的css文档，可以自动生成标题序号。
Typora标题自动编号
03-29
使用方法见https://gitee.com/QQ56188788/AutoNumberingHeadingsForTypora
自用Typora样式（自动编号功能）
tcmyxc的博客
04-08 1162
自用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 415
Typora插件中标题自动编号功能解析 在Typora插件开发中，标题自动编号是一个常见的功能需求。本文将从技术角度深入分析该功能的实现原理和使用方法。 标题编号的默认行为 Typora插件默认采用层级编号机制，但有一个值得注意的特性：默认情况下，编号从二级标题开始。这种设计考虑到了大多数文档的排版习惯，因为一级标题通常作为文档主标题，不需要编号。 启用一级标题编号的方法 如果需要从一级标题开始编...
typora设置标题自动编号
juluwangriyue的博客
06-26 7498
配置前 配置后：1、打开 typora 的主题目录 2、将仓库中的 和 两个文件都拷贝到主题目录中 3、配置完成，重启 typora 文档内容标题就会有自动编号了。参考：https://github.com/lipengzhou/typora-theme-auto-numbering按照上述操作后发现结果如下，看不到左侧的导航栏了，其实是因为typora新版本的原因，在左下角有一个小圆圈，使用来控制显示与隐藏导航栏的，点一下就可以了。 About Themes Auto Numbering for H
Typora 实现标题自动编号
qinrui_view的博客
08-21 889
，然后在正文中依次使用二级、三级标题等。自动编号是从二级标题开始的。一级标题是主标题，只应该有一个，也不应加上编号。Markdown使用# ## ### #### ##### ###### 可以生成标题,但没有序号.5.使用文本编辑器打开新建的文件,下拉光标到文件最后一行,4.当前路径下粘贴文件,并更改文件名,文件名不能含中文。3.复制目录中自己使用的主题(主题以*.css结尾)7.重启Typora,在外观中选择自己新建的主题。文章必须有主标题，且必须是一级标题“2.选择外观,点击打开主题文件夹。
typora 标题自动编号
weixin_45871977的博客
07-01 421
typora 标题自动编号
Typora自动给标题生成序号
hmmnx的博客
05-09 798
Typora自动给标题生成序号 网上找到的方法有一些小bug，在这里给出修复 准备工作 打开Typora，然后依次点击：文件→偏好设置→外观→打开主题文件夹 在该文件夹中创建base.user.css 从一级标题开始 右键编辑css文件，在文件中插入如下内容： /** initialize css counter */ #write, .sidebar-content { counter-reset: h1; } h1, .outline-h1 { counter-reset: h2; }
Typora更换主题背景
Jak的博客
09-20 2327
一、官网下载主题 地址：Typora Theme 二、typora设置主题 我们将下载好的压缩包解压，将压缩包中的.css文件和 css 样式同名的文件夹拷贝到其中打开的文件夹中 三、重启 typora 并选择新主题 参考博客 ...
[Typora Markdown BP] 修改文字格式、图片缩放对齐居中、Excel表格互转、手动分页、表格不分页、Mermaid自定义绘图（以自动机为例）、思维导图导出、word导出删文字、自动编号
A land whole of flowers.
01-11 2073
目录 文章较长，请点击书签浏览感兴趣的内容。 文章目录前言全局设置效果类修改字体、颜色、字体大小、行高等文字居中(靠右)对齐图片转存至相对路径图片缩放图片居中内容类Excel的表格与Markdown表格的互转`mermaid`相关使用特殊文字使用`classDef`语法来自定义`mermaid`节点（以自动机为例）产生目录手动分页临时解决全局解决禁止导出时，长表格的分页Markdown转思维导图Markdown转docx之后删除图片的可选文字（通常为文件名）标题自动编号 前言 BP，即Best Pract
Typora 标题的自动编号
dwh0403的专栏
09-13 296
1. 介绍 工欲善其事必先利其器，最近虽然重度使用 Typora 工具，但是突然发现很多功能还未能够实现自动化，比如标题自动编号的功能。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JJ9MqyXt-1631537212638)(https://www.ebpf.top/imgs/typora_cnt_autonumber.png)] 我们期望在输入标题的时候能够自动生成 1. 1.1 1.1.1 这样的序号用于展示，方便协作。 实际上在 Typora 中可以通过添加样式的
Typora设置标题自动编号
lizhiyuanbest的博客
04-13 649
Typora设置标题自动编号
在Typora中实现自动编号
凳子花❀的博客
01-03 1528
要应用上述CSS代码，您需要将其保存为.css文件。打开Typora。前往文件偏好设置外观。点击主题里面的打开主题文件夹按钮。，将上述代码复制进去，保存退出。完成以上设置后，重新打开或新建文档时，您应该可以看到标题已经自动编号了。
Markdown编辑器Typora标题自动编号
whitepu的博客
03-04 660
Typora标题自动编号 正文中的各级标题自动编号 来到Typora的主题文件夹： 打开Typora界面，点击左上角文件 ，偏好设置，外观，打开主题文件夹。 添加一个名为base.user.css的文件，用记事本就可。复制以下内容到文件内。 /** initialize css counter */ #write { counter-reset: h1 } h1 { counter-reset: h2 } h2 { counter-reset: h3 } h3 {
Typora自动编号
xnightmare的博客
08-22 1797
文章目录概述原理具体操作改进效果图 概述 在使用Typora写比较长的文章时，需要给章节编号，方便区分层次。如果手动编号，一旦章节顺序改变，很多章节的编号都需要一一手动修改，极其麻烦。 Typora官方提供了自动编号的方法：https://support.typora.io/Auto-Numbering/。本文将对官方提供的方法，以及简单改进进行介绍。 原理 这个方法的原理是，Typora基于浏览器开发（使用快捷键Shift+F12可以打开开发者工具），因此，可以利用CSS实现自动编号。 具体操作 打开T
记录一个自己的Markdown主题样式
奔跑吧代码
07-18 397
记录一个自己的Markdown主题样式。
形成文档
04-18
<think>好的，用户的问题是如何创建文档或生成文档的步骤，需要我根据要求进行网络搜索并生成答案。首先，我需要理解用户的意图。用户可能想了解从零开始创建文档的基本步骤，或者是使用特定工具生成文档的方法，比如Microsoft Word、Google Docs、Markdown工具等。用户可能是一个需要编写文档的职场新人、学生，或者开发者需要技术文档指导。 接下来，我需要确定用户的具体需求。问题中提到“创建或生成文档”，这可能包括不同的场景，比如文本文档、技术文档、自动化生成等。考虑到用户可能没有明确指定工具，我应该涵盖多种常见方法，确保答案具有普适性和实用性。同时，用户可能需要步骤化的指导，所以需要分点说明，避免使用第一人称和步骤词汇如“首先”、“然后”。 根据要求，需要调用网络搜索工具检索相关信息。我需要查找创建文档的通用步骤，以及不同工具的特定方法。例如，使用办公软件如Word或Google Docs的基本流程，使用Markdown编写文档并转换为其他格式，以及自动化生成文档的工具如Sphinx、Docusaurus等。还需要检查是否有关于API文档生成工具如Swagger或Javadoc的信息，因为这些可能对开发者用户有帮助。 整合信息时，要确保结构清晰，分多个方法或步骤，每个部分换行。例如，可以分为使用办公软件、Markdown工具、自动化工具等不同方法。每个方法下再分步骤，比如准备内容、选择工具、编辑排版、保存分享等。同时，要注意格式要求，如代码块和公式的格式，但用户的问题可能不涉及代码或公式，所以这部分可能较少。 需要避免引用集中在末尾，所以每个步骤中的关键点需要直接融入内容中。例如，在说明使用Markdown时，可以内联示例代码，并用代码块展示Markdown语法。同时，要检查是否满足每个步骤间的换行，不使用有序列表的编号，而是用项目符号或标题。 生成相关问题部分时，要基于用户的原问题和回答内容。例如，用户询问创建文档的步骤，相关问题可能涉及如何高效编辑、协作工具推荐、自动化生成技术文档的方法等。需要确保至少三个相关问题，并且格式正确，使用“§§相关问题§§:”作为标题，每个问题用数字标号。 最后，验证整个回答是否符合所有要求：没有第一人称，步骤词汇，正确格式，相关问题部分正确等。确保信息准确，覆盖不同用户可能的需求，如普通用户和开发者，提供多种方法，实用且可操作。</think>### 如何创建或生成文档的详细方法 --- #### 方法一：使用办公软件创建标准文档（以Microsoft Word为例） **工具准备** - 安装Microsoft Office或使用在线版Word - 明确文档类型（报告、合同、简历等） **内容编排** 打开Word后选择空白文档或模板，通过以下功能区操作： - **文字编辑**：在光标处直接输入内容 - **格式调整**：使用“开始”选项卡调整字体、段落样式 - **插入元素**：通过“插入”选项卡添加表格、图片、页眉页脚 - **自动保存**：开启“文件 > 选项 > 保存”中的自动保存功能 **输出文档** 完成编辑后执行： ```bash Ctrl+S # 本地保存 文件 > 导出 > 创建PDF/XPS # 生成不可编辑版本 ``` --- #### 方法二：使用Markdown生成结构化文档 **语法基础** ```markdown # 标题 - 列表项 **加粗文本** [链接文字](URL) ``` **工具链配置** 1. 安装VS Code或Typora编辑器 2. 创建`.md`文件并编写内容 3. 使用Pandoc转换格式： ```bash pandoc input.md -o output.docx # 转Word pandoc input.md -o output.pdf --pdf-engine=xelatex # 转PDF ``` **自动化扩展** - 集成Git版本控制 - 使用MkDocs生成静态网站文档： ```yaml # mkdocs.yml示例 site_name: 项目文档 nav: - 首页: index.md - 配置指南: configuration.md ``` --- #### 方法三：通过代码自动生成技术文档 **API文档生成（以Swagger为例）** 1. 在代码中添加注解： ```java @ApiOperation(value = "获取用户信息") public User getUser(@ApiParam("用户ID") String id) { ... } ``` 2. 使用Swagger UI渲染： ```bash mvn springfox-boot:run # SpringBoot项目启动后访问/swagger-ui ``` **数据库文档生成** - 使用SchemaSpy分析数据库结构： ```bash java -jar schemaspy.jar -t mysql -db mydb -u root -p 1234 -o ./docs ``` --- #### 方法四：云端协作文档生成 **Google Docs实时协作** 1. 访问`docs.google.com`新建文档 2. 点击“分享”按钮设置协作权限 3. 使用“版本历史”追踪修改记录 **Notion模板化生成** - 选择知识库/项目计划模板 - 通过`/`命令快速插入数据库、看板等组件 --- ### 文档质量优化建议 **排版规范** - 使用$1.5\times$行距提升可读性 - 图片添加`图1: 架构图`格式的题注 **版本控制** - 文件名添加日期标识：`项目报告_20230820_v2.docx` - 使用Git管理Markdown文档变更历史 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值