Typora配色和标题自带序号

最新推荐文章于 2024-06-07 17:29:16 发布
置顶 最新推荐文章于 2024-06-07 17:29:16 发布
阅读量3.2k 收藏 31
点赞数 15
分类专栏： 研究
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43778239/article/details/109810113
版权

(老是有人盗用我的文章还不给我打链接。。。气气。。。原文链接 https://blog.csdn.net/qq_43778239/article/details/109810113)

文章目录

效果展示

使用前效果

在这里插入图片描述

使用后效果

在这里插入图片描述
在这里插入图片描述

代码添加位置和添加方法

先打开主题文件夹

文件>偏好设置>外观>打开主题文件夹

然后编辑base.user.css（如果没有就新建一个）文件

将喜欢的效果部分对应的代码加入即可（自选效果），也可以直接使用后面的汇总代码（所有效果）

代码及其效果

标题自带行号

前后效果对比

在这里插入图片描述

在这里插入图片描述

代码

/*标题自动添加序号*/
.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) " "
}

#write {
    counter-reset: h1
}

h1 {
    counter-reset: h2
}

h2 {
    counter-reset: h3
}

h3 {
    counter-reset: h4
}

h4 {
    counter-reset: h5
}

h5 {
    counter-reset: h6
}

#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

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

#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;
}

代码块仿MAC图标

前后效果对比

在这里插入图片描述

在这里插入图片描述

/*因为不同主题的代码块部分不一样，code部分统一*/
.CodeMirror-lines {
    padding-left: 4px;
}

.code-tooltip {
    box-shadow: 0 1px 1px 0 rgba(0,28,36,.3);
    border-top: 1px solid #eef2f2;
}

.md-fences,
code,
tt {
    background-color: #f8f8f8;
    border-radius: 3px;
    padding: 0;
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 0.9em;
}

code {
    background-color: #f3f4f4;
    padding: 0 2px 0 2px;
}

.md-fences {
    margin-bottom: 15px;
    margin-top: 15px;
    padding-top: 8px;
    padding-bottom: 6px;
}


.md-task-list-item > input {
  margin-left: -1.3em;
}

@media print {
    html {
        font-size: 13px;
    }
    table,
    pre {
        page-break-inside: avoid;
    }
    pre {
        word-wrap: break-word;
    }
}

.md-fences {
	background-color: #f8f8f8;
}
#write pre.md-meta-block {
	padding: 1rem;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f7f7f7;
    border: 0;
    border-radius: 3px;
    color: #777777;
    margin-top: 0 !important;
}

.mathjax-block>.code-tooltip {
	bottom: .375rem;
}

/*MAC的三个图标*/

#write .md-fences:not([mermaid-type]):before {
    content: "";
    z-index: 4;
    display: block;
    position: absolute;
    top: 7px;
    left: 13px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    float: left;
    background-color: #fa3534;
}

.md-fences:not([mermaid-type]) .cm-s-inner{
    padding-top: 30px;
}

.md-fences:not([mermaid-type]) .cm-s-inner:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 29px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    float: left;
    z-index: 4;
    background-color: #ff9900;
}
#write .md-fences:not([mermaid-type])::after {
    content: "";
    z-index: 4;
    display: block;
    position: absolute;
    top: 7px;
    left: 53px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    float: left;
    background-color: #19be6b;
}

代码块配色

效果对比

在这里插入图片描述

在这里插入图片描述

/*深色背景*/

#write .md-fences:not([mermaid-type])  {
    padding-top: 7px;
    border-radius: 10px;
    background-color: #282c34;
    color: #eeeeee;
}

.code-tooltip .ty-input,
.code-tooltip input {
    color: #eee;
}

/*高亮配色*/
.cm-s-inner .cm-number,/*数字*/
.cm-s-inner .cm-property {/*被调用的方法*/
    color: #f08d49 !important;
}
.cm-s-inner .cm-variable-3,/*形参,类型*/
.cm-s-inner .cm-qualifier,/*css class*/
.cm-s-inner .cm-variable-2 {/*被使用的形参*/
    color: #FFCB6B;
}
.cm-s-inner .cm-meta,/*省略号,注解等*/
.cm-s-inner .cm-atom,/*css属性值，布尔值等等*/
.cm-s-inner .cm-keyword{/*关键字*/
    color: #cc99cd;
}
.cm-s-inner .cm-def,/*变量名*/
.cm-s-inner .cm-variable {/*被使用的变量名*/
    color: #FFCB6B;
}
.cm-s-inner .cm-builtin {/*被调用的属性,php中是被调用的函数*/
    color: #82AAFF;
}
.cm-s-inner .cm-comment {/*注释*/
    color: #888;
}
.cm-s-inner .cm-string,/*字符串*/
.cm-s-inner .cm-type,/*类型*/
.cm-s-inner .cm-string-2 {/*正则表达式*/
    color: #7ec699
}
.CodeMirror-line .cm-operator {/*运算符*/
    color: #67cdcc
}
.CodeMirror div.CodeMirror-cursor {/*光标*/
    border-left: 1px solid #EEE;
    z-index: 3;
}
.CodeMirror-selected,/*选中的背景*/
.CodeMirror-selectedtext {
    background: #666 !important;
}
.cm-s-inner .cm-tag{/*标签名字*/
    color: #F07178;
}
.cm-s-inner .cm-bracket{/*标签尖括号*/
    color: #EEE;
}
.cm-s-inner .cm-attribute{/*属性*/
    color: #FFCB6B;
}

/*对java部分的特色配色*/
pre[lang="java"] .cm-variable{
    color: #EEE;
}

行内代码样式

效果对比

在这里插入图片描述

在这里插入图片描述

.md-pair-s code{
    color: #42b983;
    font-weight: 600;
    background-color: transparent;
    border: none;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 1em;
}

所有代码汇总

/*标题自动添加序号*/
.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) " "
}

#write {
    counter-reset: h1
}

h1 {
    counter-reset: h2
}

h2 {
    counter-reset: h3
}

h3 {
    counter-reset: h4
}

h4 {
    counter-reset: h5
}

h5 {
    counter-reset: h6
}

#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

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

#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;
}
/*因为不同主题的代码块部分不一样，code部分统一*/
.CodeMirror-lines {
    padding-left: 4px;
}

.code-tooltip {
    box-shadow: 0 1px 1px 0 rgba(0,28,36,.3);
    border-top: 1px solid #eef2f2;
}

.md-fences,
code,
tt {
    background-color: #f8f8f8;
    border-radius: 3px;
    padding: 0;
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 0.9em;
}

code {
    background-color: #f3f4f4;
    padding: 0 2px 0 2px;
}

.md-fences {
    margin-bottom: 15px;
    margin-top: 15px;
    padding-top: 8px;
    padding-bottom: 6px;
}


.md-task-list-item > input {
  margin-left: -1.3em;
}

@media print {
    html {
        font-size: 13px;
    }
    table,
    pre {
        page-break-inside: avoid;
    }
    pre {
        word-wrap: break-word;
    }
}

.md-fences {
	background-color: #f8f8f8;
}
#write pre.md-meta-block {
	padding: 1rem;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f7f7f7;
    border: 0;
    border-radius: 3px;
    color: #777777;
    margin-top: 0 !important;
}

.mathjax-block>.code-tooltip {
	bottom: .375rem;
}


/*深色背景*/

#write .md-fences:not([mermaid-type])  {
    padding-top: 7px;
    border-radius: 10px;
    background-color: #282c34;
    color: #eeeeee;
}

.code-tooltip .ty-input,
.code-tooltip input {
    color: #eee;
}


/*MAC的三个图标*/

#write .md-fences:not([mermaid-type]):before {
    content: "";
    z-index: 4;
    display: block;
    position: absolute;
    top: 7px;
    left: 13px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    float: left;
    background-color: #fa3534;
}

.md-fences:not([mermaid-type]) .cm-s-inner{
    padding-top: 30px;
}

.md-fences:not([mermaid-type]) .cm-s-inner:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 29px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    float: left;
    z-index: 4;
    background-color: #ff9900;
}
#write .md-fences:not([mermaid-type])::after {
    content: "";
    z-index: 4;
    display: block;
    position: absolute;
    top: 7px;
    left: 53px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    float: left;
    background-color: #19be6b;
}

/*配色*/
.cm-s-inner .cm-number,/*数字*/
.cm-s-inner .cm-property {/*被调用的方法*/
    color: #f08d49 !important;
}
.cm-s-inner .cm-variable-3,/*形参,类型*/
.cm-s-inner .cm-qualifier,/*css class*/
.cm-s-inner .cm-variable-2 {/*被使用的形参*/
    color: #FFCB6B;
}
.cm-s-inner .cm-meta,/*省略号,注解等*/
.cm-s-inner .cm-atom,/*css属性值，布尔值等等*/
.cm-s-inner .cm-keyword{/*关键字*/
    color: #cc99cd;
}
.cm-s-inner .cm-def,/*变量名*/
.cm-s-inner .cm-variable {/*被使用的变量名*/
    color: #FFCB6B;
}
.cm-s-inner .cm-builtin {/*被调用的属性,php中是被调用的函数*/
    color: #82AAFF;
}
.cm-s-inner .cm-comment {/*注释*/
    color: #888;
}
.cm-s-inner .cm-string,/*字符串*/
.cm-s-inner .cm-type,/*类型*/
.cm-s-inner .cm-string-2 {/*正则表达式*/
    color: #7ec699
}
.CodeMirror-line .cm-operator {/*运算符*/
    color: #67cdcc
}
.CodeMirror div.CodeMirror-cursor {/*光标*/
    border-left: 1px solid #EEE;
    z-index: 3;
}
.CodeMirror-selected,/*选中的背景*/
.CodeMirror-selectedtext {
    background: #666 !important;
}

/*html*/
.cm-s-inner .cm-tag{/*标签名字*/
    color: #F07178;
}
.cm-s-inner .cm-bracket{/*标签尖括号*/
    color: #EEE;
}
.cm-s-inner .cm-attribute{/*属性*/
    color: #FFCB6B;
}
pre[lang="java"] .cm-variable{
    color: #EEE;
}

.md-pair-s code{
    color: #42b983;
    font-weight: 600;
    background-color: transparent;
    border: none;
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 1em;
}
月 夕
关注
  • 15
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
专栏目录
Typora代码块配色和标题自带序号的实现代码
James
05-27 697
Typora代码块配色和标题自带序号的实现代码
手把手教你Typora大纲如何显示序号（支持六级标题栏序号）
yundashi168.com
09-04 484
2 新建 base.user.css文件。
typora设置标题自动编号
juluwangriyue的博客
06-26 6340
配置前 配置后：1、打开 typora 的主题目录 2、将仓库中的 和 两个文件都拷贝到主题目录中 3、配置完成，重启 typora 文档内容标题就会有自动编号了。参考：https://github.com/lipengzhou/typora-theme-auto-numbering按照上述操作后发现结果如下，看不到左侧的导航栏了，其实是因为typora新版本的原因，在左下角有一个小圆圈，使用来控制显示与隐藏导航栏的，点一下就可以了。 About Themes Auto Numbering for H
Typora自动添加标题序号
最新发布
weixin_46191137的博客
06-07 505
文件-偏好设置-外观，点击打开主题文件夹在这里插入图片描述。
Mermaid知识点总结4 - Flowchart 3
u011315681的博客
09-08 1517
Mermaid知识点总结4 - Flowchart 3 子图 添加子图时候定义方式如下所示： subgraph title graph definition end 下面展示了一个子图的例子： flowchart TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end #me
MarkDown：基本设置（字体、颜色等）（自己看）
Linux
01-09 1万+
为便于理解，使用的代码在代码片中，具体效果在其后展示。 --------------------------- 为便于理解，使用的代码在代码片中，具体效果在其后展示。 <font face="楷体" size = 4 color = Blue > MarkDown MarkDown &amp
PPT制作配色和技巧V2.0.pdf
06-30
PPT制作配色和技巧V2.0.pdfPPT制作配色和技巧V2.0.pdfPPT制作配色和技巧V2.0.pdfPPT制作配色和技巧V2.0.pdfPPT制作配色和技巧V2.0.pdfPPT制作配色和技巧V2.0.pdf
Eclipse和Studio配色方案
02-14
在编程世界里，良好的代码编辑器配色方案对于程序员的视力保护和工作效率至关重要。Eclipse和Android Studio作为两款广泛使用的Java开发工具，提供了丰富的自定义配色方案来满足不同开发者的需求。本文将深入探讨这...
Source Insight 3.5 好看的主题和配色方案
08-31
Source Insight 3.5 好看的主题和配色方案
myconfig：Source Insight 3.5 好看的主题和配色方案
08-20
本文将重点讨论如何在Source Insight 3.5中应用美观的主题和配色方案，以提升编程环境的舒适度和效率。 首先，我们需要了解CF3文件。在Source Insight中，`.cf3`文件是一种配置文件，用于存储用户的自定义设置，...
Markdown mermaid图表
q2412322029的博客
04-29 667
一.流程图 1. 绘图方向 命令 方向 TB（TD） 从上到下 BT 从下到上 RL 从右到左 LR 从左到右 2. 节点形状 命令 形状 A[text] 文本框（默认形状） B(text) 圆角框 C([text]) 体育场型框 D[(text)] 数据库型框 E((text)) 圆形框 F>text] 非对称框 G{text} 菱形框 H{{text}} 六边形框 I[/text/] J[\text] 平行四边形框
Markdown骚操作｜字体颜色、字体背景、流程图一网打尽【建议收藏】
二哥为啥不像程序员？
08-31 1万+
本文二哥带领大家来学习一下Markdown文档编辑的那些高端操作。 推荐MD编辑器：Typora 注：除最后一个图外，均可用于CSDN Markdown！ 注：文中代码块中给出书写格式，下方给出效果展示。 别犹豫了！先收藏吧！ 一、标题 为了使段落展示的更加清晰，Markdown中设置了多级标题的表达形式，级别用#来表示，几个#就表示几级标题，代码形式如下： 注意#后面要有一个空格 # 一级标题 ## 二级标题 ### 三级标题 示例如下： 一级标题 二级标题 三级标题 二、字体 Markdow.
Typora更改代码块颜色
HHT0506的博客
05-14 2769
Typora中，找到主题文件夹：文件 -> 偏好设置 -> 外观 ->打开主题文件夹。 主题文件夹下创建base.user.css文件，内容如下： .CodeMirror-line .cm-number{color:#7f6bff} /*数字，蓝色*/ .CodeMirror-line .cm-property { color: #f08d49; } .CodeMirror-line .cm-variable-3{color:#ffed6b} /*返回值、变量类型，int、v
typora修改主题字体、代码块字体、行内块代码字体大小、引用块字体大小、代码块背景颜色、文章可写区域宽度以及修改教程
热门推荐
m0_62283830的博客
07-13 2万+
typora修改主题字体、代码块字体、行内块代码字体大小、引用块字体大小、代码块背景颜色以及修改教程
Typora文本颜色设置
巧克力配酸奶的博客
06-12 7856
记录修改typora编辑文本颜色的两种方式效果如下这是Red色\textcolor{Red}{这是Red色}这是Red色这是Plum色\textcolor{Plum}{这是Plum色}这是Plum色。
typora中mermaid的基本语法
热爱编程、热爱生活、热爱探索
02-12 6329
三个`(间隔号)+mermaid ```+mermaid //进入代码快就能够，做思维导图，流程图了 做思维导图： #mermaid-svg-hs2s4HA9UtZYt6bG .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-hs2s4HA9UtZYt6bG .label text{fill:#333}#.
Typora主题代码更改(引用块颜色, 标题样式和颜色, 行内代码样式)
weixin_44809386的博客
10-03 7366
Typora主题库中的主题总有自己不喜欢的部分所以自己在github主题的基础上做了一些更改。
typora自动生成标题序号（修改V1.0）
weixin_53592372的博客
03-19 891
通过修改Typora的css文档，可以自动生成标题序号。
matlab绘图的配色和线条
09-20
Matlab绘图的配色和线条可以通过调用不同的函数和设置来实现。一个常用的函数是cbrewer，它可以生成各种配色方案。例如，通过使用cbrewer('seq','Purples',50,'linear')可以生成Purples配色方案的RGB矩阵。然后，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值