手机怎样建立自己网站,大型网页游戏开发,化妆品网站方案,大数据营销的核心文章目录 在Typora中实现自动编号1. 引言2. 准备工作3. 自动编号的实现3.1 文章大纲自动编号3.2 主题目录#xff08;TOC#xff09;自动编号3.3 文章内容自动编号3.4 完整代码 4. 应用自定义CSS5. 结论 在Typora中实现自动编号
1. 引言
Typora是一款非常流行的Markdown编辑… 文章目录 在Typora中实现自动编号1. 引言2. 准备工作3. 自动编号的实现3.1 文章大纲自动编号3.2 主题目录TOC自动编号3.3 文章内容自动编号3.4 完整代码 4. 应用自定义CSS5. 结论 在Typora中实现自动编号
1. 引言
Typora是一款非常流行的Markdown编辑器以其简洁直观的界面而闻名。尽管它默认不提供对标题自动编号的支持但通过自定义CSS我们可以轻松地为我们的文档添加这一功能。本篇文章将展示如何设置自动编号使得文章结构更加清晰有助于读者快速定位到感兴趣的部分。
2. 准备工作
在开始之前请确保您已经下载并安装了Typora。此外您还需要了解一些基本的CSS知识因为我们将通过自定义CSS来实现自动编号。为了使这些样式生效您需要确保Typora启用了“使用自定义CSS”选项并且您的CSS文件正确加载。
3. 自动编号的实现
3.1 文章大纲自动编号
首先我们需要为文章的大纲添加自动编号。这可以通过以下完整的CSS代码片段来完成
/*文章大纲自动编号*/
.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-h2.outline-item.outline-label:before {counter-increment: h2;content: counter(h2) . ;
}.outline-h3.outline-item.outline-label:before {counter-increment: h3;content: counter(h2) . counter(h3) ;
}.outline-h4.outline-item.outline-label:before {counter-increment: h4;content: counter(h2) . counter(h3) . counter(h4) ;
}.outline-h5.outline-item.outline-label:before {counter-increment: h5;content: counter(h2) . counter(h3) . counter(h4) . counter(h5) ;
}.outline-h6.outline-item.outline-label:before {counter-increment: h6;content: counter(h2) . counter(h3) . counter(h4) . counter(h5) . counter(h6) ;
}这段代码会为每个标题级别创建一个计数器并在每个标题前显示相应的编号。
3.2 主题目录TOC自动编号
接下来我们为生成的主题目录添加自动编号。这是通过以下完整的CSS规则实现的
/*文章主题目录自动编号*/
/* No link underlines in TOC */
.md-toc-inner {text-decoration: none;
}.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-h2:before {color: black;counter-increment: h2toc;content: counter(h2toc) . ;
}.md-toc-h2 .md-toc-inner {margin-left: 0;
}.md-toc-h3:before {color: black;counter-increment: h3toc;content: counter(h2toc) . counter(h3toc) ;
}.md-toc-h3 .md-toc-inner {margin-left: 0;
}.md-toc-h4:before {color: black;counter-increment: h4toc;content: 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(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(h2toc) . counter(h3toc) . counter(h4toc) . counter(h5toc) . counter(h6toc) ;
}.md-toc-h6 .md-toc-inner {margin-left: 0;
}此段代码同样为TOC中的每个标题设置了计数器并在每个条目前添加了编号。
3.3 文章内容自动编号
最后我们希望正文中的标题也能够自动编号。下面的完整CSS代码可以满足这个需求
/*文章内容自动编号*/
/** initialize css counter */
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 h2:before {counter-increment: h2;content: counter(h2) . ;
}#write h3:before,
h3.md-focus.md-heading:before /** override the default style for focused headings */ {counter-increment: h3;content: counter(h2) . counter(h3) ;
}#write h4:before,
h4.md-focus.md-heading:before {counter-increment: h4;content: counter(h2) . counter(h3) . counter(h4) ;
}#write h5:before,
h5.md-focus.md-heading:before {counter-increment: h5;content: counter(h2) . counter(h3) . counter(h4) . counter(h5) ;
}#write h6:before,
h6.md-focus.md-heading:before {counter-increment: h6;content: counter(h2) . counter(h3) . counter(h4) . counter(h5) . counter(h6) ;
}/** override the default style for focused headings */
#writeh3.md-focus:before,
#writeh4.md-focus:before,
#writeh5.md-focus:before,
#writeh6.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;
}这些规则确保了正文中的标题也会按照大纲顺序进行编号。
3.4 完整代码
/*文章大纲自动编号*/
.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-h2.outline-item.outline-label:before {counter-increment: h2;content: counter(h2) .
}.outline-h3.outline-item.outline-label:before {counter-increment: h3;content: counter(h2) . counter(h3)
}.outline-h4.outline-item.outline-label:before {counter-increment: h4;content: counter(h2) . counter(h3) . counter(h4)
}.outline-h5.outline-item.outline-label:before {counter-increment: h5;content: counter(h2) . counter(h3) . counter(h4) . counter(h5)
}.outline-h6.outline-item.outline-label:before {counter-increment: h6;content: counter(h2) . counter(h3) . counter(h4) . counter(h5) . counter(h6)
}/*文章主题目录自动编号*/
/* No link underlines in TOC */
.md-toc-inner {text-decoration: none;
}.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-h2:before {color: black;counter-increment: h2toc;content: counter(h2toc) .
}.md-toc-h2 .md-toc-inner {margin-left: 0;
}.md-toc-h3:before {color: black;counter-increment: h3toc;content: counter(h2toc) . counter(h3toc)
}.md-toc-h3 .md-toc-inner {margin-left: 0;
}.md-toc-h4:before {color: black;counter-increment: h4toc;content: 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(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(h2toc) . counter(h3toc) . counter(h4toc) . counter(h5toc) . counter(h6toc)
}.md-toc-h6 .md-toc-inner {margin-left: 0;
} /*文章内容自动编号*/
/** initialize css counter */
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 h2:before {counter-increment: h2;content: counter(h2) .
}#write h3:before,
h3.md-focus.md-heading:before /** override the default style for focused headings */ {counter-increment: h3;content: counter(h2) . counter(h3)
}#write h4:before,
h4.md-focus.md-heading:before {counter-increment: h4;content: counter(h2) . counter(h3) . counter(h4)
}#write h5:before,
h5.md-focus.md-heading:before {counter-increment: h5;content: counter(h2) . counter(h3) . counter(h4) . counter(h5)
}#write h6:before,
h6.md-focus.md-heading:before {counter-increment: h6;content: counter(h2) . counter(h3) . counter(h4) . counter(h5) . counter(h6)
}/** override the default style for focused headings */
#writeh3.md-focus:before,
#writeh4.md-focus:before,
#writeh5.md-focus:before,
#writeh6.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. 应用自定义CSS
要应用上述CSS代码您需要将其保存为.css文件。具体步骤如下
打开Typora。前往文件 偏好设置 外观。点击主题里面的打开主题文件夹按钮。打开之后新建文件base.user.css将上述代码复制进去保存退出。
完成以上设置后重新打开或新建文档时您应该可以看到标题已经自动编号了。
5. 结论
通过简单的自定义CSS我们可以在Typora中为文章大纲、主题目录和正文内容添加自动编号从而提高文档的专业性和可读性。如果您经常撰写技术文档或学术论文这项功能将极大地提升您的写作效率。希望这篇文章能帮助您更好地利用Typora的强大功能。
