Typora书写.md文件时自动生成编号

前言：Typora的实现基于浏览器，各个界面都是HTML语言渲染出来的，所以，我们就可以通过添加css样式表，来添加自动编号的功能

1、新建一个名称为“base.user.css”的样式文件，将下面的代码复制进去，保存

/** * 说明：* 正文标题区: #write* 侧边栏的目录大纲区: .sidebar-content * 要完成自动编号功能，必须借助CSS3中的如下特性：* 计数器：counter(基准计数器)，用于计算基准计数器的值* 计数器增量：counter-increment，设置每次增长的量* 重置计数器：counter-reset，用于将当前标题的计数器重置到指定的基准计数器* 子代类型选择器：nth-of-type，可以从子代中选择出同一类型元素中的指定元素*/
.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) " "
}/** 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;
}

2、依次打开：文件->偏好设置->外观->主题->打开主题文件夹

3、将上一步保存的css文件复制粘贴进来

4、关闭Typora程序及所有md相关文件，重新打开Typora，随便写入一些1-6标题的文字，测试效果

Typora书写.md文件时自动生成编号相关推荐

安装Ruby、Sass在WebStrom添加Watcher实现编辑scss文件时自动生成.map和压缩后的.css文件...
前言这段时间一直在看Bootstrap,V3官方直接提供了Less版本的源码,就先将Less学完了,很简单的语法,学习写Demo都是在Webstorm里写的,配置了Watcher自动编译(详见< ...
Python创建文件时自动生成文件信息
Python创建文件时自动生成文件信息在创建python脚本文件时,对文件初始化自动生成一些文件信息来进行设置 1 打开路径 2 调整面板 3 面板填写样式参考链接 Pycharm创建文件时自动生 ...
在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件
1.操作前确定成功安装less,检测方法,在命令行(cmd),输入lessc -v,看到如下类似内容,则说明安装过了. 如果需要生成压缩后的css的文件,则需要通过以下命令安装插件 npm in ...
去掉excel保存文件时自动生成备份
问题出现:同事说自己在保存文件时总是会出现一个相就的备份文件. 问题解决:这是因为设定了自动备份.autocad.word. excel等很多应用软件都有这个现象,这是为了留下一个历史文件,避免想恢复 ...
在WebStorm里配置watcher实现编辑less文件时自动生成.css文件
一.webstrom自动生成css文件 1.安装 nodejs //查看nodejs版本 node -v //查看npm版本 npm -v //全局安装less npm install ...
MyEclipse中流程定义文件保存时自动生成流程图
前提:MyEclipse已安装Activiti插件第一步:打开菜单Windows->Preferences 第二步:选择Activiti->Save 第三步:勾选Create proce ...
如何配置log4j每天产生日志，并且当天日志大于10M时自动生成另一个文件
http://bbs.csdn.net/topics/390635339?page=1 如何配置log4j每天产生日志,并且当天日志大于10M时自动生成另一个文件假设 11-11日生成comlib ...
id自动编号 php,php根据数据id自动生成编号的实现方法
php根据数据id自动生成编号的实现方法如下所示: /*编号=年份后两位+月份+id四位数*/ $id = $this->student_model->save(0, $data); $ ...
mysql的自动编码_mysql 自动生成编号函数
根据需求,保存表数据时需要自动生成一个编号,格式如:AA-2020-03-31-0001 (AA-yyyy-MM-dd-序号).数据库用的mysql,所以创建一个mysql函数. 1.建表: cre ...

Typora书写.md文件时自动生成编号

Typora书写.md文件时自动生成编号相关推荐

最新文章

热门文章