hugo-teek is loading...

2024-12-25 其它 +1 typora 15460 字 83 分钟 -- 次

css定制

最后更新于: 2025-12-06 17:39:04

css定制

个人定制css原则

橙黄色主色调，简约美观

自定义typora主题

参考链接

https://developer.mozilla.org/en-US/

主题配置原则

尽量以护眼绿为主，要注意色调搭配。
要简洁，不要太花，要以文字为重点。

主题名称命名原则

typora主题命名规则

typora-theme-主题名称_版本号

例子：

typora-theme-xx_v1.0

个人喜欢命名如下：

后来-2022.9.2【荐】.css

添加自定义 CSS

参考链接

https://support.typoraio.cn/Add-Custom-CSS/

提示：此功能需要 Windows 上的 Typora 高于 0.9.12 或 macOS 上的 0.9.9.5.1。

打开主题文件夹

要在 Finder/Explorer 中打开 Typora 的主题文件夹，请在外观部分打开首选项面板，单击“打开主题文件夹”按钮。在“外观”部分下。

您可以在此处添加自定义主题。如果您想查找、安装或编写主题，请参阅关于主题页面。

但是您可能只想修改 CSS，例如更改字体或增加书写区域，并将其应用于所有主题或仅当前主题，而无需编写全新的主题文件。本节向您展示如何执行此操作。

定制typora主题css文件

使用typora的时候，想要自定义一些颜色、字体，或者修改一些设置，这个时候需要修改或者自己编写css文件。

打开文件 - 偏好设置 - 外观 - 打开主题文件夹，选择你自己的主题名.css（默认是 Github.css），在最后插入 CSS 代码，保存退出，再次打开typora文件即可；

将自定义 CSS 附加到所有主题或其他主题

Typora 将按以下顺序加载 CSS 文件：

Typora 的基本风格
当前主题的 CSS
base.user.css在主题文件夹下
{current-theme}.user.css在主题文件夹下。

如果它们不存在，您可以在主题文件夹下创建base.user.css和。{current-theme}.user.css

（1）如果要更改 CSS 样式并将其应用于所有主题，则应修改base.user.css并附加自己的 CSS，因此无论选择什么主题，您的 CSS 样式仍将被加载和应用。

（2）如果您想为特定主题修改一些 CSS ，例如“Newsprint”，您可以创建newsprint.user.css并附加您想要的 CSS。

我们不建议您直接修改主题文件的原因是：

安装 Typora 后可用的默认主题也可能会更新。如果发生这种情况，那么新版本只会替换主题文件夹下的现有版本，您的修改将丢失。
其他人开发的主题将来也可能会更改。如果他们改变了他们的 CSS 文件，你可以用你的旧文件替换他们的新文件，而不用担心你的修改会消失。

（如果你自己写 CSS 主题，那么直接修改就可以了。）

注意：文件名区分大小写。{current-theme}in{current-theme}.user.css必须与当前主题的文件名部分相同。例如，“GitHub”主题的 CSS 文件是github.css，所以文件名部分是“github”而不是“Github”。

😂 哈哈：自己的话，直接修改.css主题就完事儿了。

如下：

后来-2022.9.5【荐】.css

调试CSS

您可以打开 Chrome/Safari DevTools 来调试元素样式。

在 macOS 上，您可以检查Help->Enable Debug菜单项，然后右键单击 Typora 的混合编辑视图中的任意位置，然后从上下文菜单中单击“检查元素”。
View在 Windows/Linux 上，您可以从->Toggle DevTools菜单项打开 DevTools 。

常用样式定制

代码块

范例：仿mac图标（暗黑）

效果

代码

  1/* ----------------------------------------- 代码块 --------------------------------------- */
  2/* 代码块顶栏 */
  3.md-fences {
  4  padding-top: 30px;
  5  background-color: var(--code-top-background-color);
  6  border: var(--code-border);
  7  border-radius: var(--code-border-radius);
  8}
  9.md-fences::before {
 10  position: absolute;
 11  left: 10px;
 12  top: 8px;
 13  content: '';
 14  width: 15px;
 15  height: 15px;
 16  border-radius: 50%;
 17  background: rgb(252, 98, 93);
 18  box-shadow: 25px 0px rgb(253, 188, 64),
 19              50px 0px rgb(53, 205, 75);
 20}
 21
 22/* 代码块主体 */
 23.cm-s-inner.CodeMirror {
 24  margin: 0px;
 25  padding: 6px;
 26  font-family: var(--code-font-family);
 27  font-size: var(--code-font-size);
 28  font-weight: var(--code-font-weight);
 29  color: var(--code-color);
 30  background-color: var(--code-body-background-color);
 31  border-top: 1px solid var(--code-body-border-top-color);
 32  border-bottom-left-radius: var(--code-border-radius);
 33  border-bottom-right-radius: var(--code-border-radius);
 34}
 35
 36/* 代码块行号 */
 37.cm-s-inner .CodeMirror-linenumber {
 38  color: var(--code-linenum-color);
 39  font-weight: var(--code-linenum-font-weight);
 40}
 41
 42/* 代码块光标 */
 43#write .CodeMirror-cursors .CodeMirror-cursor {
 44  border-left: var(--code-cursor-border);
 45}
 46
 47/* 行号与代码分割线 */
 48.CodeMirror-wrap .CodeMirror-code pre {
 49  border-left: var(--code-divided-line-border);
 50}
 51
 52/* 代码语言输入框 */
 53.md-fences .code-tooltip{
 54  padding: 0px;
 55  background-color: var(--code-inputbox-color);
 56}
 57.code-tooltip .ty-input{
 58  border: var(--code-inputbox-border);
 59}
 60.code-tooltip .ty-input:focus{
 61  border: var(--code-inputbox-focus-border);
 62}
 63
 64/* 选中的行 */
 65.md-fences.md-focus .CodeMirror-code>div.CodeMirror-activeline {
 66  background-color: var(--code-selected-line-color);
 67}
 68
 69/* 选中的代码 */
 70.cm-s-inner .CodeMirror-selected {
 71  background-color: var(--code-selected-code-color) !important;
 72}
 73.cm-s-inner .CodeMirror-selectedtext {
 74  background-color: transparent !important;
 75}
 76
 77/* 代码块变量颜色 */
 78.cm-s-inner .cm-keyword {
 79  color: #c792ea !important;
 80}
 81.cm-s-inner .cm-operator {
 82  color: #89ddff !important;
 83}
 84.cm-s-inner .cm-variable-2 {
 85  color: #eeffff !important;
 86}
 87.cm-s-inner .cm-variable-3 {
 88  color: #f07178 !important;
 89}
 90.cm-s-inner .cm-type {
 91  color: #f07178 !important;
 92}
 93.cm-s-inner .cm-builtin {
 94  color: #ffcb6b !important;
 95}
 96.cm-s-inner .cm-atom {
 97  color: #f78c6c !important;
 98}
 99.cm-s-inner .cm-number {
100  color: #ff5370 !important;
101}
102.cm-s-inner .cm-def {
103  color: rgb(130, 170, 255) !important;
104}
105.cm-s-inner .cm-string {
106  color: #a2c077 !important;
107}
108.cm-s-inner .cm-string-2 {
109  color: #f07178 !important;
110}
111.cm-s-inner .cm-comment {
112  color: #fff !important;
113}
114.cm-s-inner .cm-variable {
115  color: #f07178 !important;
116}
117.cm-s-inner .cm-tag {
118  color: #ff5370 !important;
119}
120.cm-s-inner .cm-meta {
121  color: #ffcb6b !important;
122}
123.cm-s-inner .cm-attribute {
124  color: #c792ea !important;
125}
126.cm-s-inner .cm-property {
127  color: #c792ea !important;
128}
129.cm-s-inner .cm-qualifier {
130  color: #decb6b !important;
131}
132.cm-s-inner .cm-variable-3,
133.cm-s-inner .cm-type {
134  color: #decb6b !important;
135}
136.cm-s-inner .cm-error {
137  color: #fff !important;
138  background-color: #ff5370 !important;
139}
140/* --------------------------------------------------------------------------------------- */
141
142
143
144
145  /* 代码块颜色 */
146  --code-font-family: 'Consolas';
147  --code-font-size: 0.9rem;
148  --code-font-weight: 400;
149  --code-color: #a6accd;
150  --code-border: 1px solid #000;
151  --code-border-radius: 10px;
152  --code-top-background-color:rgb(33, 37, 43);                   /* 代码块头部背景颜色 */
153  --code-body-background-color:rgb(41, 45, 62);                  /* 代码块主体背景颜色 */
154  --code-body-border-top-color: rgba(167, 178, 189, 0.2);        /* 代码块主体上边框颜色 */
155  --code-linenum-color: #f0ad4e;                                 /* 行号颜色 */
156  --code-linenum-font-weight: 500;                                 /* 行号字粗 */
157  --code-cursor-border: 2px solid #fff;                          /* 光标配置 */
158  --code-divided-line-border: 1px solid white;                   /* 分割线配置 */
159  --code-inputbox-color: rgba(167, 178, 189, 0.2);               /* 输入框的颜色 */
160  --code-inputbox-border: 2px solid #000;                        /* 输入框的边框配置 */
161  --code-inputbox-focus-border: 2px solid #61abff;               /* 聚焦后输入框的边框配置 */
162  --code-selected-line-color: rgba(167, 178, 189, 0.2);          /* 光标所在代码行的颜色 */
163  --code-selected-code-color: rgba(167, 178, 189, 0.2);          /* 选择代码后,代码的背景色 */

范例：仿mac图标（白色）

效果

配置方法

 1/* 代码块 */
 2.md-fences::before {
 3  content: "";
 4  display: block;
 5  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDUwcHgiIGhlaWdodD0iMTMwcHgiPgogIDxlbGxpcHNlIGN4PSI2NSIgY3k9IjY1IiByeD0iNTAiIHJ5PSI1MiIgc3Ryb2tlPSJyZ2IoMjIwLDYwLDU0KSIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJyZ2IoMjM3LDEwOCw5NikiLz4KICA8ZWxsaXBzZSBjeD0iMjI1IiBjeT0iNjUiIHJ4PSI1MCIgcnk9IjUyIiAgc3Ryb2tlPSJyZ2IoMjE4LDE1MSwzMykiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0icmdiKDI0NywxOTMsODEpIi8+CiAgPGVsbGlwc2UgY3g9IjM4NSIgY3k9IjY1IiByeD0iNTAiIHJ5PSI1MiIgIHN0cm9rZT0icmdiKDI3LDE2MSwzNykiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0icmdiKDEwMCwyMDAsODYpIi8+Cjwvc3ZnPg==);
 6  height: 30px;
 7  width: 100%;
 8  background-size: 40px;
 9  background-repeat: no-repeat;
10  background-color: #f8f8f8;
11  border-radius: 5px 5px 0 0;
12  background-position: 6px 10px;
13}
14
15.cm-s-inner.CodeMirror {
16  background: #f8f8f8;
17  border-radius: 0 0 5px 5px;
18  padding: 20px 10px 20px 20px;
19  page-break-before: auto;
20  line-height: 1.65rem;
21}

示例：github主题代码风格

配置方法

 1/*=======================================================代码块设置===================================================================*/
 2
 3.CodeMirror-lines {
 4
 5    padding-left: 4px;
 6
 7}
 8
 9
10
11.code-tooltip {
12
13    box-shadow: 0 1px 1px 0 rgba(0,28,36,.3);
14
15    border-top: 1px solid #eef2f2;
16
17}
18
19
20
21.md-fences,
22
23code,
24
25tt {
26
27    border: 1px solid #e7eaed;
28
29    background-color: #f8f8f8;
30
31    border-radius: 3px;
32
33    padding: 0;
34
35    padding: 2px 4px 0px 4px;
36
37    font-size: 0.9em;
38
39    /* font-family: DejaVu Sans Mono, Monaco, 'Courier New', monospace; */
40
41    /* font-family: DejaVu Sans Mono, Monaco, 'Courier New', monospace; */
42
43}

效果展示

示例：material主题代码风格

配置方法

  1/*=======================================================代码块设置===================================================================*/
  2
  3/** ported from https://codemirror.net/theme/material.css **/
  4
  5/*
  6
  7
  8
  9    Name:       material
 10
 11    Author:     Michael Kaminsky (http://github.com/mkaminsky11)
 12
 13
 14
 15    Original material color scheme by Mattia Astorino (https://github.com/equinusocio/material-theme)
 16
 17
 18
 19*/
 20
 21
 22
 23.cm-s-inner {
 24
 25    background-color: #382f26;
 26
 27    color: rgba(233, 237, 237, 1);
 28
 29  }
 30
 31  .cm-s-inner .CodeMirror-gutters {
 32
 33    background: #263238;
 34
 35    color: rgb(83,127,126);
 36
 37    border: none;
 38
 39  }
 40
 41
 42
 43  .cm-s-inner .CodeMirror-guttermarker, .cm-s-inner .CodeMirror-guttermarker-subtle, .cm-s-inner .CodeMirror-linenumber { color: rgb(83,127,126); }
 44
 45  .cm-s-inner .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
 46
 47  .cm-s-inner div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
 48
 49  .cm-s-inner.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
 50
 51  .cm-s-inner .CodeMirror-line::selection, .cm-s-inner .CodeMirror-line > span::selection, .cm-s-inner .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
 52
 53  .cm-s-inner .CodeMirror-line::-moz-selection, .cm-s-inner .CodeMirror-line > span::-moz-selection, .cm-s-inner .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
 54
 55
 56
 57  .cm-s-inner .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
 58
 59  .cm-s-inner .cm-keyword { color: rgba(199, 146, 234, 1); }
 60
 61  .cm-s-inner .cm-operator { color: rgba(233, 237, 237, 1); }
 62
 63  .cm-s-inner .cm-variable-2 { color: #80CBC4; }
 64
 65  .cm-s-inner .cm-variable-3 { color: #82B1FF; }
 66
 67  .cm-s-inner .cm-builtin { color: #DECB6B; }
 68
 69  .cm-s-inner .cm-atom { color: #F77669; }
 70
 71  .cm-s-inner .cm-number { color: #F77669; }
 72
 73  .cm-s-inner .cm-def { color: rgba(233, 237, 237, 1); }
 74
 75  .cm-s-inner .cm-string { color: #C3E88D; }
 76
 77  .cm-s-inner .cm-string-2 { color: #80CBC4; }
 78
 79  .cm-s-inner .cm-comment { color: #546E7A; }
 80
 81  .cm-s-inner .cm-variable { color: #82B1FF; }
 82
 83  .cm-s-inner .cm-tag { color: #80CBC4; }
 84
 85  .cm-s-inner .cm-meta { color: #80CBC4; }
 86
 87  .cm-s-inner .cm-attribute { color: #FFCB6B; }
 88
 89  .cm-s-inner .cm-property { color: #80CBAE; }
 90
 91  .cm-s-inner .cm-qualifier { color: #DECB6B; }
 92
 93  .cm-s-inner .cm-variable-3 { color: #DECB6B; }
 94
 95  .cm-s-inner .cm-tag { color: rgba(255, 83, 112, 1); }
 96
 97  .cm-s-inner .cm-error {
 98
 99    color: rgba(255, 255, 255, 1.0);
100
101    background-color: #EC5F67;
102
103  }
104
105
106
107  .cm-s-inner .CodeMirror-matchingbracket {
108
109    text-decoration: underline;
110
111    color: white !important;
112
113  }
114
115
116
117  /**apply to code fences with plan text**/
118
119  .md-fences {
120
121    background-color: #263238;
122
123    color: rgb(237, 234, 233);
124
125    border: none;
126
127  }
128
129
130
131  .md-fences .code-tooltip {
132
133    background-color: #263238;
134
135  }
136
137
138
139  /* 在源代码基础上，增加了这段代码，次代码控制代码块的字体和背景色 */
140
141  .CodeMirror-lines {
142
143    cursor: text;
144
145    background-color: #232323;
146
147    font-family: DejaVu Sans Mono, Monaco, 'Courier New', monospace;
148
149}

效果展示

示例：模拟mac的3个图标(白色)

配置方法

 1/* code block */
 2
 3\#write pre.md-fences {
 4
 5	padding: 1rem 0.5rem 1rem;
 6
 7	display: block;
 8
 9	-webkit-overflow-scrolling: touch;
10
11	/* box-shadow: 0 0 6px 2px rgba(151, 151, 151, 0.9); */
12
13    /* border-top: rgb(51, 51, 51) solid 35px; */
14
15    border-top: rgb(244, 244, 244) solid 35px;
16
17    background-color: rgb(244, 244, 244);
18
19}
20
21
22
23
24
25pre.md-fences::before {
26
27	content: ' ';
28
29	background: #fa3534;
30
31	box-shadow: 23px 0 #ff9900, 45px 0 #19be6b;
32
33	border-radius: 50%;
34
35	margin-top: -2.3rem;
36
37	position: absolute;
38
39	left: 15px;
40
41	height: 12px;
42
43	width: 12px;
44
45}
46
47
48
49\#write pre.md-fences {
50
51	line-height: 1.5rem;
52
53	font-size: 0.9rem;
54
55	font-weight: 300;
56
57	border-radius: .7em;
58
59    /* font-family: var(--monospace) !important; */
60
61    /* background-color: #232323; */
62
63    font-family: DejaVu Sans Mono, Monaco, 'Courier New', monospace;
64
65}

效果展示

示例：模拟mac的3个图标（暗黑）

配置方法

 1/* 
 2
 3模拟MAC的三个图标 
 4
 5*/
 6
 7.CodeMirror-wrap .CodeMirror-scroll {
 8
 9  padding-top: 20px;
10
11}
12
13
14
15\#write .md-fences:before {
16
17  content: "";
18
19  z-index: 4;
20
21  display: block;
22
23  position: absolute;
24
25  top: 7px;
26
27  left: 15px;
28
29	height: 12px;
30
31	width: 12px;
32
33  border-radius: 50%;
34
35  float: left;
36
37  background-color: #fa3534;
38
39}
40
41
42
43\#write .CodeMirror-scroll:before {
44
45  content: "";
46
47  display: block;
48
49  position: absolute;
50
51  top: 0px;
52
53	left: 25px;
54
55	height: 12px;
56
57	width: 12px;
58
59  border-radius: 50%;
60
61  float: left;
62
63  z-index: 999;
64
65  background-color: #ff9900;
66
67}
68
69\#write .md-fences::after {
70
71  content: "";
72
73  z-index: 4;
74
75  display: block;
76
77  position: absolute;
78
79  top: 7px;
80
81	left: 55px;
82
83	height: 12px;
84
85	width: 12px;
86
87  border-radius: 50%;
88
89  float: left;
90
91  background-color: #19be6b;
92
93}

效果展示

示例：修改代码背景颜色为sublime text3的背景色

注意

注意：sublimet text3背景颜色的颜色代码为

background: #232323; 这个颜色为sublime text3的颜色；

配置方法

 1/*
 2
 3代码块设置：
 4
 5*/
 6
 7\#write .md-fences:not([mermaid-type])  {
 8
 9  font-family: var(--monospace-font);
10
11	font-size: 1rem;
12
13  font-weight: bold;
14
15
16
17  padding: 0.6rem;
18
19  padding-top: 7px;
20
21  border-radius: 10px;
22
23  background-color: #232323; /*这个背景色为sublime text背景色*/
24
25  color: #eeeeee;
26
27  border-radius: 0.4rem;
28
29	box-shadow: var(--block-shadow);
30
31}

效果展示

示例：修改代码块字体

配置方法

 1/*修改代码块代码字体*/
 2
 3.md-fences,
 4
 5code,
 6
 7tt {
 8
 9  background-color: #f8f8f8;
10
11  border-radius: 3px;
12
13  padding: 0;
14
15  padding-left: 4px !important;
16
17  padding-right: 4px !important;
18
19  font-size: 0.9em;
20
21  font-family: consolas, 'Courier New', monospace; /* 修改代码字体 */
22
23}
24
25
26
27\#write .md-fences:not([mermaid-type])  {
28
29  padding: 0.6rem;
30
31  padding-top: 7px;
32
33  border-radius: 10px;
34
35  background-color: #232323;
36
37  color: #eeeeee;
38
39  border-radius: 0.4rem;
40
41	box-shadow: var(--block-shadow);
42
43}

示例：typora的代码块的光标颜色配置（已配置）

配置方法

1/*typora的代码块的光标颜色配置:2021.12.15update*/
2
3.cm-s-inner .CodeMirror-cursor {
4
5  border-left: solid rgb(96, 255, 96) !important;
6
7}

效果展示

示例：设置代码块下边距

配置时间：2023年2月14日

这个功能并不是很友好，这里弃用；

配置方法

 1/* code fences(围栏) */
 2.md-fences {
 3    font-family: "Fira Code", Consolas, "Lucida Console", "Courier", monospace, "Helvetica Neue", Helvetica, Arial, sans-serif;
 4    background-color: #282c34;
 5    padding: 6px 10px;
 6    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 7    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 8    /* margin-bottom: 2.5rem;  */
 9    margin-bottom: 0.5rem; 
10    border: none;
11    border-radius: 6px;
12}

效果展示

默认效果还是好一点：

行内代码块

案例

配置方法

 1/*
 2
 3	行内代码块
 4
 5*/
 6
 7code {
 8
 9  background-color: var(--code-background-color);
10
11  border-radius: 5px;
12
13  padding: 4px;
14
15  color: var(--code-color);
16
17}

效果展示

侧边栏

案例：配置侧边栏鼠标悬浮后颜色

效果

配置方法

1/*================================================================================侧边栏 大纲 设置==============================================================*/
2/* 侧边栏当前小姐所在颜色 */
3.outline-item-active{background:#6fd18d;color:#fff;}
4.outline-content li, .outline-content ul{margin:5px 0!important; }
5
6/* 侧边栏鼠标悬浮后颜色 */
7.outline-item:hover {
8  background-color: #bac6e9 !important;
9}

示例：设置左侧目录字体

配置方法

1/*设置左侧目录字体(亲测成功)-2021.12.13*/
2
3header, .context-menu, .megamenu-content, footer{
4
5    font-family: "霞鹜文楷","SimSun", "Arial", sans-serif;
6
7}

效果展示

示例：typora左侧文档树搜索框颜色修改

配置方法

 1input[type="search" i] {
 2
 3    appearance: auto;
 4
 5    box-sizing: border-box;
 6
 7    padding: 1px 2px;
 8
 9    background-color: #cc99cd;
10
11    color: black;
12
13}

案例

配置方法

  1/* 
  2
  3侧边栏设置：sidebar 
  4
  5*/
  6
  7.megamenu-menu-header {
  8
  9  width: 60%;
 10
 11  text-align:center;
 12
 13  border-bottom: solid 3px var(--main-color);
 14
 15}
 16
 17\#megamenu-menu-sidebar {
 18
 19  background-color: rgba(255, 255, 255, 0.1);
 20
 21  color: var(--sidebar-font-color);
 22
 23  box-shadow: 0 0 8px 4px rgb(100 100 100 / 80%);
 24
 25  margin-top: 3%;
 26
 27  height: 92%;
 28
 29  border-radius: 0 4em 4em 0;
 30
 31}
 32
 33\#megamenu-back-btn {
 34
 35  border-radius: 1.2em;
 36
 37  color: var(--main-color);
 38
 39  transition: all linear .3s;
 40
 41  padding: 0 0 10px;
 42
 43}
 44
 45
 46
 47\#megamenu-back-btn:hover {
 48
 49  background-color: var(--main-color);
 50
 51  color: white;
 52
 53  border: 2px solid white;
 54
 55  transition: all linear .3s;
 56
 57}
 58
 59
 60
 61\#megamenu-menu-list > li {
 62
 63  transition: all linear .3s;
 64
 65}
 66
 67
 68
 69\#megamenu-menu-list > li:hover {
 70
 71  transition: all linear .3s;
 72
 73  border-top-left-radius: 1.2em;
 74
 75  border-bottom-left-radius: 1.2em;
 76
 77}
 78
 79
 80
 81\#megamenu-menu-list > li:focus {
 82
 83  transition: all linear .3s;
 84
 85  color : white;
 86
 87  background-color: var(--shadow-color);
 88
 89  width: fit-content;
 90
 91  border-top-right-radius: 1.2em;
 92
 93  border-bottom-right-radius: 1.2em;
 94
 95}
 96
 97
 98
 99.dropdown-menu .divider {
100
101  width: 30%;
102
103  color: var(--main-color);
104
105  background-color: var(--main-color);
106
107}
108
109.megamenu-menu-list li a {
110
111  transition: all linear .3s;
112
113  width: fit-content;
114
115  padding-right: 60px;
116
117}
118
119
120
121.megamenu-menu-list li a:hover {
122
123  transition: all linear .3s;
124
125  color: white !important;
126
127  background-color: var(--main-color) !important;
128
129  border-bottom-right-radius: 2em;
130
131  border-top-right-radius: 2em;
132
133}
134
135
136
137.megamenu-menu-list li a.active, .megamenu-menu-list:not(.saved) li a:hover {
138
139  color: white !important;
140
141  background-color: var(--main-color) !important;
142
143  border-bottom-right-radius: 2em;
144
145  border-top-right-radius: 2em;
146
147}
148
149
150
151
152
153/* open */
154
155\#m-open-local,
156
157\#m-import-local {
158
159  border-radius: 1.2em;
160
161}
162
163
164
165\#m-open-local:hover,
166
167\#m-import-local:hover {
168
169  border: 1px solid var(--shadow-color);
170
171}
172
173
174
175\#recent-file-panel-search-input {
176
177  border-radius: 1.2em;
178
179  transition: all linear .3s;
180
181  font-family: var(--title-font);
182
183}
184
185\#recent-file-panel-action-btn {
186
187  border-radius: 1.2em;  
188
189}
190
191
192
193\#recent-file-panel-search-input:hover {
194
195  transition: all linear .3s;
196
197  box-shadow: 0 0 10px 3px var(--shadow-color);
198
199}
200
201
202
203\#recent-file-panel-search-input:focus {
204
205  transition: all linear .3s;
206
207  color: white;
208
209  border: none;
210
211  background-color: var(--shadow-color);
212
213}
214
215
216
217/* side bar Ctrl Shift 2 */
218
219/* .typora-node.pin-outline:not(.megamenu-opened):not(.typora-sourceview-on) #typora-sidebar {
220
221  display: block;
222
223  left: 0;
224
225  transition: left .3s;
226
227  border-radius: 0em 3em 3em 0em;
228
229  box-shadow: 0 0 8px 3px rgb(100 100 100 / 80%);
230
231  margin-top: 20px;
232
233  margin-bottom: 5%;
234
235  height: 95%;
236
237  padding-right: 10px;
238
239} */
240
241
242
243.info-panel-tab-border {
244
245  color: var(--main-color) !important;
246
247  background-color: var(--main-color) !important;
248
249}
250
251
252
253.outline-content {
254
255  padding: 3px 18px 3px 0;
256
257}
258
259
260
261.outline-item {
262
263  margin-left: -20px;
264
265  margin-right: -20px;
266
267  border-left: 20px solid transparent;
268
269  border-right: 16px solid transparent;
270
271}
272
273
274
275.outline-item:hover {
276
277  background-color: var(--shadow-color);
278
279  color: white;
280
281}
282
283
284
285.active-tab-files  #info-panel-tab-file .info-panel-tab-title {
286
287  background-color: var(--main-color);
288
289  color: white;
290
291  padding: 5px 5px;
292
293  border-radius: 1.2em;
294
295  transition: all linear .3s;
296
297}
298
299
300
301.active-tab-outline #info-panel-tab-outline .info-panel-tab-title {
302
303  background-color: var(--main-color);
304
305  color: white;
306
307  padding: 5px 5px;
308
309  border-radius: 1.2em;
310
311  transition: all linear .3s;
312
313}
314
315
316
317.ty-show-search #info-panel-tab-search  .info-panel-tab-title {
318
319  background-color: var(--main-color);
320
321  color: white;
322
323  padding: 5px 5px;
324
325  border-radius: 1.2em;
326
327  transition: all linear .3s;
328
329}
330
331
332
333
334
335\#file-library-search-input {
336
337  border-radius: .5em;
338
339}
340
341
342
343\#file-library-search-input:focus {
344
345  border: 2px solid var(--main-color);
346
347}
348
349
350
351.info-panel-tab-border {
352
353  display: none;
354
355}
356
357div#file-library-list-children {
358
359  transition: all linear .3s;
360
361}
362
363
364
365.file-list-item.active {
366
367  border-top-right-radius: 2.2em;
368
369  border-bottom-right-radius: 2.2em;
370
371  width: fit-content;
372
373  background-color: var(--main-color) !important;
374
375  color: white;
376
377  transition: all linear .3s;
378
379}
380
381
382
383.outline-item-active {
384
385  border-top-right-radius: 2.2em;
386
387  border-bottom-right-radius: 2.2em;
388
389  width: fit-content;
390
391  background-color: var(--main-color) !important;
392
393  color: white;
394
395  transition: all linear .3s;
396
397}

示例：设置右侧滚动滑块的颜色

案例1：默认不添加代码

默认这个灰色效果会好一点，可以让人更关注文章内容本身。

案例2：有颜色的

配置方法

 1/* 设置右侧滚动滑块的颜色 */
 2
 3
 4
 5/* 设置滚动条的样式 */
 6
 7::-webkit-scrollbar {
 8
 9  width: 8px;
10
11  height: 8px;
12
13}
14
15
16
17/* 滚动槽 */
18
19::-webkit-scrollbar-track {
20
21  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
22
23  border-radius: 8px;
24
25}
26
27
28
29/* 滚动条滑块 */
30
31::-webkit-scrollbar-thumb {
32
33  border-radius: 8px;
34
35  background: pink;
36
37  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25);
38
39}

效果展示

示例：大纲小三角图标设置

配置方法

  1\#typora-sidebar #sidebar-loading-template.file-list-item {
  2
  3  border-bottom: transparent !important;
  4
  5  background-color: rgba(171, 192, 208, 0.1);
  6
  7}
  8
  9
 10
 11\#typora-sidebar .info-panel-tab-wrapper .info-panel-tab:hover {
 12
 13  color: inherit;
 14
 15}
 16
 17
 18
 19\#typora-sidebar .info-panel-tab-wrapper .info-panel-tab .info-panel-tab-border {
 20
 21  background-color: #2f845e;
 22
 23  border-radius: 4px;
 24
 25}
 26
 27
 28
 29\#typora-sidebar .sidebar-osx-tab .sidebar-tabs {
 30
 31  border-bottom-color: transparent;
 32
 33}
 34
 35
 36
 37\#typora-sidebar #sidebar-content .file-list-item {
 38
 39  border-bottom: 1px solid #eee;
 40
 41}
 42
 43
 44
 45\#typora-sidebar #sidebar-content .file-list-item.active {
 46
 47  background-color: rgba(66, 185, 131, 0.1);
 48
 49  border-left: 4px solid #2f845e;
 50
 51}
 52
 53
 54
 55\#typora-sidebar #sidebar-content .ty-sidebar-search-panel {
 56
 57  border-bottom: 1px solid #eee;
 58
 59}
 60
 61
 62
 63\#typora-sidebar #sidebar-content .ty-sidebar-search-panel .searchpanel-search-option-btn {
 64
 65  background-color: #fff;
 66
 67}
 68
 69
 70
 71/* 文件数  文件名字体大小 */
 72
 73/* #typora-sidebar #sidebar-content .sidebar-content-content .file-node-content {
 74
 75  line-height: 1.375rem;
 76
 77  font-size: 0.9rem;
 78
 79  color: #282c34 !important;
 80
 81} */
 82
 83
 84
 85\#typora-sidebar #sidebar-content .sidebar-content-content .file-tree-node:not(.file-node-root):hover > .file-node-background {
 86
 87  border-left: 4px solid #2f845e;
 88
 89  background-color: rgba(66, 185, 131, 0.1);
 90
 91}
 92
 93
 94
 95\#typora-sidebar #sidebar-content .sidebar-content-content .file-tree-node.active > .file-node-background {
 96
 97  border-color: #2f845e;
 98
 99  background-color: rgba(66, 185, 131, 0.1);
100
101}
102
103
104
105\#typora-sidebar #sidebar-content .sidebar-content-content #file-library-list-children .file-library-file-node:hover {
106
107  border-left: 4px solid #2f845e;
108
109  background-color: rgba(66, 185, 131, 0.1);
110
111}
112
113
114
115\#typora-sidebar #sidebar-content #outline-content .no-collapse-outline .outline-item {
116
117  line-height: 1.375rem;
118
119  font-size: 1rem;
120
121}
122
123
124
125\#typora-sidebar #sidebar-content #outline-content .outline-expander:before {
126
127  color: inherit;
128
129  font-size: 14px;
130
131  top: auto;
132
133  content: "\f0da";
134
135  font-family: FontAwesome;
136
137}
138
139
140
141\#typora-sidebar #sidebar-content #outline-content .outline-expander:hover:before,
142
143\#typora-sidebar #sidebar-content #outline-content .outline-item-open > .outline-item > .outline-expander:before {
144
145  content: "\f0d7";
146
147}
148
149
150
151\#typora-sidebar #sidebar-content #outline-content .outline-item:hover {
152
153  background-color: #bac6e9 !important;
154
155}
156
157
158
159\#typora-sidebar #ty-sidebar-footer {
160
161  border-top: 1px solid #eee;
162
163}
164
165
166
167\#typora-sidebar #ty-sidebar-footer .sidebar-footer-item:hover {
168
169  background-color: #bac6e9 !important;
170
171}
172
173
174
175\#typora-sidebar #ty-sidebar-footer #sidebar-files-menu {
176
177  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
178
179          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
180
181}

效果展示

示例：控制 TOC 水平

1在 Typora 中[TOC]会生成“目录”。默认情况下，它将显示从h1到 的标题h6。例如，要隐藏较低级别的标题，h6您可以附加以下 CSS：
2
3.md-toc-h6 {
4
5  display: none;
6
7}

示例：Typora侧边栏同时查看大纲和文件|添加TabBar

typora默认的布局

文件和文章目录只能显示一个，不能同时显示：

希望实现的需求如下：

希望能后实现，typora显示的布局左边是文件列表，右边是文章目录：

参考别人文章

https://zhuanlan.zhihu.com/p/503555038?utm_source=qq&utm_medium=social&utm_oi=1138758273699348480

这部分内容，我不懂哈哈：

测试过程

https://github.com/XiLaiTL/typora-theme-bothview-tabbar/

bothview是有效果的：（很nice😘）

但是tabbar我这边是没效果的：（问题不大哈哈）

自己最终主题文件如下：

022.9.26-typora-theme-后来(bothview).zip

侧边栏选择点

配置时间：2023年1月14日

配置方法

 1/* Selection Dot ，侧边栏选择点*/
 2.outline-item-active::after,
 3.active .file-list-item-file-name::after,
 4.active .file-node-content::after {
 5    content: "";
 6    position: absolute;
 7    top: calc(50% - 4px);
 8    right: 0;
 9    width: 8px;
10    height: 8px;
11    border-radius: 50%;
12    background: #0284c7;
13}

效果展示

案例：修改侧边栏目录和文档图标

2024年9月18日测试。

阿里巴巴矢量图标库：官网地址

这里使用的是阿里巴巴的矢量图标库为例，首先进入首页，点击资源管理—>我的项目，如图：

①新建图标库项目

新建项目，填写完之后点击新建

②添加图标到项目

搜索自己喜欢的图标或者你项目要使用的图标，添加到购物车 --> 添加至项目 --> 选择刚刚创建的项目 --> 确定

点击确定之后会跳转到我们的项目列表

③下载图标源码

解压之后会看到如下文件，我们这里需要的是iconfont.woff文件

④自定义Typora图标

以上是演示修改Typora左侧菜单栏的文件夹图标和文件图标，其他字体图标原理相同。

fortunate.scss

 1:root {
 2  ......
 3  /* 文件夹图标 */
 4  --fa-folder: "\e756"; 
 5  /* 文件图标 */ 
 6  --fa-file: "\e7b4";
 7}
 8
 9@font-face {
10  /* 必须为 FontAwesome */ 
11  font-family: 'FontAwesome';
12  src: url('./fortunate/iconfont.woff') format('woff');
13  font-weight: normal;
14  font-style: normal;
15}
16
17.fa {
18  /* 字体类型，必须为fa，与上面@font-face的font-family对应 */
19  font-family: FontAwesome;
20  /* 图标大小 */
21  font-size: 1rem;
22}
23
24/* 文件夹图标 */
25.fa-folder:before {
26  content: var(--fa-folder);
27}
28
29/* 文件图标 */
30.fa-file-text-o:before {
31  content: var(--fa-file);
32}

重启Typora，效果如下：

表格

案例

配置方法

  1:root {
  2
  3  --side-bar-bg-color: rgba(231,153,176,0.5);
  4
  5  --window-border: 2px solid #E799B0;
  6
  7  --main-color: rgba(128, 30, 255, 1);
  8
  9  --shadow-color : rgb(178, 80, 255);
 10
 11  --transplate-color : rgba(128, 30, 255, 0.1);
 12
 13  --dark-color : rgb(70, 18, 137);
 14
 15  --light-color : rgb(248, 242, 255);
 16
 17  --font-color : rgb(12, 12, 12);
 18
 19  --base-font : "Glow Sans", "Microsoft YaHei", serif;
 20
 21  --title-font: "Roboto Slab", "Times", serif;
 22
 23  --blockquote-font : "Times", "Roboto Slab", serif;
 24
 25  --blockquote-color : rgba(117, 117, 117, 0.9);
 26
 27  --monospace: "Cascadia code", "Courier New", monospace; 
 28
 29
 30
 31  /* --background : url("https://cdn.jsdelivr.net/gh/LSTM-Kirigaya/KImage/Img/2k.jpg"); */
 32
 33
 34
 35  --quote-title-font-size : 0.9em;
 36
 37  --quote-tag-font-size : 1.1em;
 38
 39
 40
 41  /* typora GUI config */
 42
 43  --sidebar-font-color : black;
 44
 45  --main-panel-font-color : black;
 46
 47}
 48
 49
 50
 51/* 列表设置：table */
 52
 53\#write table
 54
 55{
 56
 57    width: 95%;
 58
 59    border-collapse: collapse;
 60
 61    text-align: center;
 62
 63    font-family: var(--monospace);
 64
 65    margin: 20px;
 66
 67}
 68
 69\#write table td, table th
 70
 71{
 72
 73    border: 1px solid transparent;
 74
 75    color: rgb(18, 18, 18);
 76
 77    height: 30px;
 78
 79    padding: 10px;
 80
 81    border-radius: .5em;
 82
 83    transition: all 0.3s linear;
 84
 85    -moz-transition: all 0.3s linear;
 86
 87    -webkit-transition: all 0.3s linear;
 88
 89}
 90
 91\#write table td {
 92
 93    font-family: var(--title-font);
 94
 95}
 96
 97\#write table thead th
 98
 99{
100
101    background-color: var(--shadow-color);
102
103    font-size: 20px;
104
105    color: white;
106
107    font-weight: bolder;
108
109    width: 100px;
110
111    text-align: center;
112
113    vertical-align: middle;
114
115    padding: 10px;
116
117}
118
119table tr:nth-child(odd)
120
121{
122
123    background: white;
124
125}
126
127table tr:nth-child(even)
128
129{
130
131    background: var(--light-color);
132
133}
134
135table td:hover {
136
137  background-color: var(--shadow-color) !important;
138
139  color: white !important;
140
141  box-shadow: 0 0 10px 5px var(--shadow-color);
142
143  transition: all 0.3s linear;
144
145  -moz-transition: all 0.3s linear;
146
147  -webkit-transition: all 0.3s linear;
148
149}

配置效果

图片

案例：居中、阴影

效果

配置代码：

 1/*================================================================================图片 设置==============================================================*/
 2/* 图片阴影效果 */
 3
 4/* 这里强制为阴影效果 */
 5#write img {
 6  /* max-width: 90% ; */
 7  /* border-radius: 8px; */
 8  /* margin:1.2rem auto; */
 9  border-radius: 20px;
10  box-shadow: 2px 3px 6px 2px #8C8C8C;
11  border: none !important;
12}
13
14
15/* 当 “![shadow](url)”写时，图片会有圆角阴影效果 */
16.md-image img[alt|='shadow'] {
17  border-radius: 20px;
18  box-shadow: 2px 3px 6px 2px #8C8C8C;
19  border: none !important;
20}
21
22
23/* 当 “![frame](url)”写时，图片会有边框效果 */
24.md-image img[alt|='frame'] {
25  border-radius: none !important;
26  border: 10px solid #ffffff;
27  outline: 1px solid var(--img-outline-color);
28}
29
30
31/* 图片居左对齐 */
32/* p .md-image:only-child {
33  width: auto;
34  text-align: left;
35} */
36
37
38/* 图片自动编号 */
39#write{
40counter-reset: imgNum;
41}
42#write p>.md-image:after{
43counter-increment: imgNum;
44content: "图" counter(imgNum) attr(alt) !important;
45text-align: center;
46width: 100%;
47display: inline-block;
48margin-top: 8px !important;
49font-size: small;
50}
51
52/* 设置图片边框 */
53/* img{padding:5px!important;background:pink!important;} */

设置图片默认对齐方式

默认情况，Typora的图片是居中对齐的。
现在有个需求，想让每次哦插入的图片都默认做对齐，该如何实现呢？
设置方法打开文件 - 偏好设置 - 外观 - 打开主题文件夹，选择你自己的主题名.css（默认是 Github.css），在最后插入 CSS 代码，保存退出，再次打开typora文件即可：

1/*设置图片默认左对齐：在css文件末尾追加即可*/
2
3p .md-image:only-child{
4
5    width: auto;
6
7    text-align: left;
8
9    }

效果展示

给图片添加阴影个圆角功能

方法1

配置方法

1img {
2
3    /*给图片添加阴影个圆角功能：2022.1.21更新*/
4
5    filter: drop-shadow(10px 10px 10px  green);
6
7    border-radius: 8px;
8
9}

效果展示

方法2（荐）

配置方法

 1\#write img {
 2
 3  border-radius: 1.5em !important;
 4
 5  box-shadow: 0 0 10px 3px rgba(134, 136, 137, 0.8);
 6
 7  transition: all 0.3s linear;
 8
 9  -moz-transition: all 0.3s linear;
10
11  -webkit-transition: all 0.3s linear;
12
13}

效果展示

圆边角设置为20px看起来比较美观-2022.9.14

配置方法

 1/*=====================================================================图片 设置===================================================================*/
 2
 3/* 图片阴影效果 */
 4
 5/* 这里强制为阴影效果 */
 6
 7\#write img {
 8
 9  /* max-width: 90% ; */
10
11  /* border-radius: 8px; */
12
13  /* margin:1.2rem auto; */
14
15
16
17  border-radius: 20px;
18
19  box-shadow: 2px 3px 6px 2px #8C8C8C;
20
21  border: none !important;
22
23}
24
25
26
27/* 当 “![shadow](D:/BaiduSyncdisk/url)”写时，图片会有圆角阴影效果 */
28
29.md-image img[alt|='shadow'] {
30
31  border-radius: 20px;
32
33  box-shadow: 2px 3px 6px 2px #8C8C8C;
34
35  border: none !important;
36
37}
38
39
40
41/* 当 “![frame](D:/BaiduSyncdisk/url)”写时，图片会有边框效果 */
42
43.md-image img[alt|='frame'] {
44
45  border-radius: none !important;
46
47  border: 10px solid #ffffff;
48
49  outline: 1px solid var(--img-outline-color);
50
51}
52
53
54
55
56
57/* 图片居左对齐 */
58
59p .md-image:only-child{
60
61  width: auto;
62
63  text-align: left;
64
65  }

效果展示

图片自动编号

配置方法

 1/* 图片自动编号 */
 2#write{
 3  counter-reset: imgNum;
 4}
 5#write p>.md-image:after{
 6  counter-increment: imgNum;
 7  content: "图" counter(imgNum) attr(alt) !important;
 8  text-align: center;
 9  width: 100%;
10  display: inline-block;
11  margin-top: 8px !important;
12  font-size: small;
13}

效果展示

总结

加了图片自动编号后，会影响编辑体验的（点击图片的下方标识数字后，会有异常的显示的……），因此将禁止次功能。（2023年1月8日）

h1-h6

案例：小竖条

效果如下

配置方法

  1/*=========================================================打h1-h6标题 设置 start================================================*/
  2h1,
  3h2,
  4h3,
  5h4,
  6h5,
  7h6 {
  8  position: relative;
  9  margin-top: 0rem;
 10  margin-bottom: 0rem;
 11  font-weight: bold;
 12  font-family: Gilroy, 阿里巴巴普惠体, "Open Sans", Alibaba Sans !important;
 13  line-height: 1.4;
 14  cursor: text;
 15  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
 16}
 17
 18h1:hover a.anchor,
 19h2:hover a.anchor,
 20h3:hover a.anchor,
 21h4:hover a.anchor,
 22h5:hover a.anchor,
 23h6:hover a.anchor {
 24  text-decoration: none;
 25}
 26
 27h1 tt,
 28h1 code {
 29  font-size: inherit !important;
 30}
 31
 32h2 tt,
 33h2 code {
 34  font-size: inherit !important;
 35}
 36
 37h3 tt,
 38h3 code {
 39  font-size: inherit !important;
 40}
 41
 42h4 tt,
 43h4 code {
 44  font-size: inherit !important;
 45}
 46
 47h5 tt,
 48h5 code {
 49  font-size: inherit !important;
 50}
 51
 52h6 tt,
 53h6 code {
 54  font-size: inherit !important;
 55}
 56
 57h2 a,
 58h3 a {
 59  color: #34495e;
 60}
 61
 62
 63
 64h1 {
 65  padding-bottom: 0.4rem;
 66  font-size: 2.2rem;
 67  line-height: 1.3;
 68  position: relative;
 69  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
 70}
 71
 72h1::before {
 73  content: " ";
 74  display: block;
 75  background-color: #23a9f2;
 76  width: 5px;
 77  height: 32px;
 78  position: absolute;
 79  top: 13px;
 80  left: -15px;
 81  border-radius: 2px;
 82  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
 83}
 84
 85/* #write h2 {
 86    text-align: center;
 87    margin-top: 2rem;
 88    margin-bottom: 1rem;
 89} */
 90
 91
 92/* 标题下划线设置 */
 93/* h2 {
 94  font-size: 1.75rem;
 95  line-height: 1.225;
 96  margin: 5px 0 5px;
 97  padding-bottom: 0.5em;
 98  border-bottom: 1px solid #ddd;
 99  position: relative;
100  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
101} */
102
103/* 标题前竖线设置 */
104h2::before {
105  content: " ";
106  display: block;
107  background-color: #ffbd2e;
108  width: 5px;
109  height: 30px;
110  position: absolute;
111  top: 6px;
112  left: -15px;
113  border-radius: 2px;
114  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
115}
116
117
118h3 {
119  font-size: 1.4rem;
120  line-height: 1.43;
121  margin: 5px 0 5px;
122  position: relative;
123  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
124  /* text-decoration: underline;
125  text-decoration-color: #27c93f;
126  text-decoration-thickness: 5px;
127  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); */
128}
129
130h3::after {
131  content: " ";
132  display: block;
133  background-color: #27c93f;
134  width: 5px;
135  height: 20px;
136  position: absolute;
137  top: 8px;
138  left: -15px;
139  border-radius: 2px;
140  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
141}
142
143
144h4 {
145  font-size: 1.2rem;
146}
147
148h4::after {
149  content: " ";
150  display: block;
151  background-color: #ff5f56;
152  width: 5px;
153  height: 15px;
154  position: absolute;
155  top: 8px;
156  left: -15px;
157  border-radius: 2px;
158  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
159}
160
161h5 {
162  font-size: 1rem;
163}
164
165h5::after {
166    content: " ";
167    display: block;
168    background-color: purple;
169    width: 5px;
170    height: 15px;
171    position: absolute;
172    top: 8px;
173    left: -15px;
174    border-radius: 2px;
175    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
176  }
177
178h6 {
179  font-size: 1rem;
180  color: #777;
181}
182
183h6::after {
184  content: " ";
185  display: block;
186  background-color: plum;
187  width: 5px;
188  height: 15px;
189  position: absolute;
190  top: 8px;
191  left: -15px;
192  border-radius: 2px;
193  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
194}
195
196
197/* *************************************h3-h6标题聚焦点 start********** */
198/* h3标题聚焦点提示 */
199h3.md-focus:before {
200    width: auto;
201    height: auto;
202    color: rgb(50, 9, 212);
203    background-color: #ff5d52;
204    border: 1px solid;
205    border-radius: 3px;
206    position: absolute;
207    left: -1.642857143rem;
208    top: 0.357142857rem;
209    float: left;
210    font-size: 9px;
211    padding-left: 2px;
212    padding-right: 2px;
213    vertical-align: bottom;
214    font-weight: 400;
215    line-height: normal;
216}
217
218
219/* h4标题聚焦点提示 */
220h4.md-focus:before {
221    width: auto;
222    height: auto;
223    color: rgb(50, 9, 212);
224    background-color: #ff5d52;
225    border: 1px solid;
226    border-radius: 3px;
227    position: absolute;
228    left: -1.642857143rem;
229    top: 0.357142857rem;
230    float: left;
231    font-size: 9px;
232    padding-left: 2px;
233    padding-right: 2px;
234    vertical-align: bottom;
235    font-weight: 400;
236    line-height: normal;
237}
238
239
240/* h5标题聚焦点提示 */
241h5.md-focus:before {
242    width: auto;
243    height: auto;
244    color: rgb(50, 9, 212);
245    background-color: #ff5d52;
246    border: 1px solid;
247    border-radius: 3px;
248    position: absolute;
249    left: -1.642857143rem;
250    top: 0.357142857rem;
251    float: left;
252    font-size: 9px;
253    padding-left: 2px;
254    padding-right: 2px;
255    vertical-align: bottom;
256    font-weight: 400;
257    line-height: normal;
258}
259
260
261/* h6标题聚焦点提示 */
262h6.md-focus:before {
263    width: auto;
264    height: auto;
265    color: rgb(50, 9, 212);
266    background-color: #ff5d52;
267    border: 1px solid;
268    border-radius: 3px;
269    position: absolute;
270    left: -1.642857143rem;
271    top: 0.357142857rem;
272    float: left;
273    font-size: 9px;
274    padding-left: 2px;
275    padding-right: 2px;
276    vertical-align: bottom;
277    font-weight: 400;
278    line-height: normal;
279}
280
281/* *************************************h3-h6标题聚焦点 end********** */

案例：重影

配置方法

 1/* 二级标题 */
 2#write h2 {
 3  display: table;
 4  margin: 30px auto 20px auto;
 5  background-image: linear-gradient(to left, rgb(253, 213, 231), rgb(194, 226, 249));
 6  border-style: solid;
 7  border-width: 1px;
 8  border-radius: 0px;
 9  border-color: rgb(62, 62, 62);
10}
11
12/* 二级标题内容 */
13#write h2 .content {
14  display:block;
15  font-size: 18px;
16  border: 1px solid black;
17  padding: 10px;
18  transform: translate3d(-5px, -5px, 0px);
19}
20
21/* 二级标题前缀 */
22#write h2 .prefix {
23}
24
25/* 二级标题后缀 */
26#write h2 .suffix {
27}

效果展示

本来理想效果应该是如下：

案例：给三级、四级、五级、六级标题设置点击后左边的提示图标-2022.7.5

配置方法

  1/* 
  2
  3h1-h6级标题设置
  4
  5*/
  6
  7h1,
  8
  9h2,
 10
 11h3,
 12
 13h4,
 14
 15h5,
 16
 17h6 {
 18
 19  position: relative;
 20
 21  margin-top: 1rem;
 22
 23  margin-bottom: 1rem;
 24
 25  font-weight: bold;
 26
 27  line-height: 1.4;
 28
 29  cursor: text;
 30
 31}
 32
 33
 34
 35h1:hover a.anchor,
 36
 37h2:hover a.anchor,
 38
 39h3:hover a.anchor,
 40
 41h4:hover a.anchor,
 42
 43h5:hover a.anchor,
 44
 45h6:hover a.anchor {
 46
 47  text-decoration: none;
 48
 49}
 50
 51
 52
 53h1 tt,
 54
 55h1 code {
 56
 57  font-size: inherit !important;
 58
 59}
 60
 61
 62
 63h2 tt,
 64
 65h2 code {
 66
 67  font-size: inherit !important;
 68
 69}
 70
 71
 72
 73h3 tt,
 74
 75h3 code {
 76
 77  font-size: inherit !important;
 78
 79}
 80
 81
 82
 83h4 tt,
 84
 85h4 code {
 86
 87  font-size: inherit !important;
 88
 89}
 90
 91
 92
 93h5 tt,
 94
 95h5 code {
 96
 97  font-size: inherit !important;
 98
 99}
100
101
102
103h6 tt,
104
105h6 code {
106
107  font-size: inherit !important;
108
109}
110
111
112
113h2 a,
114
115h3 a {
116
117  color: #34495e;
118
119}
120
121
122
123/*一级标题样式*/
124
125h1 span{
126
127display: inline-block;
128
129font-size: 1.5rem;
130
131font-weight: bold;
132
133background: rgba(140,68,250,0.7);
134
135color: #0000FF;
136
137padding: 3px 10px 1px;
138
139border-top-right-radius: 3px;
140
141border-top-left-radius: 3px;
142
143margin-top: 15px;
144
145margin-bottom: 15px;
146
147margin-right: 3px;
148
149}
150
151/*2级标题样式*/
152
153h2 span{
154
155display: inline-block;
156
157font-size: 1.3rem;
158
159font-weight: bold;
160
161background: rgba(239, 112, 96,0.7);
162
163color: #0000FF;
164
165padding: 3px 10px 1px;
166
167border-top-right-radius: 3px;
168
169border-top-left-radius: 3px;
170
171margin-top: 5px;
172
173margin-bottom: 5px;
174
175margin-right: 3px;
176
177
178
179}
180
181/*3级标题样式*/
182
183h3 span{
184
185font-size: 1.1rem ! important;
186
187display: inline-block;
188
189font-weight: bold;
190
191background: rgba(2,171,107,0.7);
192
193color: #0000FF;
194
195padding: 3px 10px 1px;
196
197border-top-right-radius: 3px;
198
199border-top-left-radius: 3px;
200
201margin-right: 3px;
202
203}
204
205
206
207h4 {
208
209  font-size: 1rem;
210
211  color: #0000FF;
212
213}
214
215
216
217h5 {
218
219  font-size: 1rem;
220
221  color: #0000FF;
222
223}
224
225
226
227h6 {
228
229  font-size: 1rem;
230
231  color: #0000FF;
232
233}
234
235
236
237
238
239p,
240
241blockquote,
242
243ul,
244
245ol,
246
247dl,
248
249table {
250
251  margin: 0.8em 0;
252
253}
254
255
256
257li > ol,
258
259li > ul {
260
261  margin: 0 0;
262
263}
264
265
266
267
268
269body > h2:first-child {
270
271  margin-top: 0;
272
273  padding-top: 0;
274
275}
276
277
278
279body > h1:first-child {
280
281  margin-top: 0;
282
283  padding-top: 0;
284
285}
286
287
288
289body > h1:first-child + h2 {
290
291  margin-top: 0;
292
293  padding-top: 0;
294
295}
296
297
298
299body > h3:first-child,
300
301body > h4:first-child,
302
303body > h5:first-child,
304
305body > h6:first-child {
306
307  margin-top: 0;
308
309  padding-top: 0;
310
311}
312
313
314
315a:first-child h1,
316
317a:first-child h2,
318
319a:first-child h3,
320
321a:first-child h4,
322
323a:first-child h5,
324
325a:first-child h6 {
326
327  margin-top: 0;
328
329  padding-top: 0;
330
331}
332
333
334
335h1 p,
336
337h2 p,
338
339h3 p,
340
341h4 p,
342
343h5 p,
344
345h6 p {
346
347  margin-top: 0;
348
349}
350
351
352
353li p.first {
354
355  display: inline-block;
356
357}
358
359
360
361ul,
362
363ol {
364
365  padding-left: 30px;
366
367}
368
369
370
371ul:first-child,
372
373ol:first-child {
374
375  margin-top: 0;
376
377}
378
379
380
381ul:last-child,
382
383ol:last-child {
384
385  margin-bottom: 0;
386
387}
388
389
390
391h3.md-focus:before {
392
393  width: auto;
394
395  height: auto;
396
397  color: rgb(50, 9, 212);
398
399  background-color: #ff5d52;
400
401
402
403  border: 1px solid;
404
405  border-radius: 3px;
406
407  position: absolute;
408
409  left: -1.642857143rem;
410
411  top: 0.357142857rem;
412
413  float: left;
414
415  font-size: 9px;
416
417  padding-left: 2px;
418
419  padding-right: 2px;
420
421  vertical-align: bottom;
422
423  font-weight: 400;
424
425  line-height: normal;
426
427}
428
429
430
431h4.md-focus:before {
432
433  width: auto;
434
435  height: auto;
436
437  color: rgb(50, 9, 212);
438
439  background-color: #ff5d52;
440
441
442
443  border: 1px solid;
444
445  border-radius: 3px;
446
447  position: absolute;
448
449  left: -1.642857143rem;
450
451  top: 0.357142857rem;
452
453  float: left;
454
455  font-size: 9px;
456
457  padding-left: 2px;
458
459  padding-right: 2px;
460
461  vertical-align: bottom;
462
463  font-weight: 400;
464
465  line-height: normal;
466
467}
468
469
470
471h5.md-focus:before {
472
473  width: auto;
474
475  height: auto;
476
477  color: rgb(50, 9, 212);
478
479  background-color: #ff5d52;
480
481
482
483  border: 1px solid;
484
485  border-radius: 3px;
486
487  position: absolute;
488
489  left: -1.642857143rem;
490
491  top: 0.357142857rem;
492
493  float: left;
494
495  font-size: 9px;
496
497  padding-left: 2px;
498
499  padding-right: 2px;
500
501  vertical-align: bottom;
502
503  font-weight: 400;
504
505  line-height: normal;
506
507}
508
509
510
511h6.md-focus:before {
512
513  width: auto;
514
515  height: auto;
516
517  color: rgb(50, 9, 212);
518
519  background-color: #ff5d52;
520
521
522
523  border: 1px solid;
524
525  border-radius: 3px;
526
527  position: absolute;
528
529  left: -1.642857143rem;
530
531  top: 0.357142857rem;
532
533  float: left;
534
535  font-size: 9px;
536
537  padding-left: 2px;
538
539  padding-right: 2px;
540
541  vertical-align: bottom;
542
543  font-weight: 400;
544
545  line-height: normal;
546
547}

效果展示

案例：h1-h6级标题风格设置（边框版）-2022.7.4

配置方法

  1/* 
  2
  3h1-h6级标题设置
  4
  5*/
  6
  7h1,
  8
  9h2,
 10
 11h3,
 12
 13h4,
 14
 15h5,
 16
 17h6 {
 18
 19  position: relative;
 20
 21  margin-top: 1rem;
 22
 23  margin-bottom: 1rem;
 24
 25  font-weight: bold;
 26
 27  line-height: 1.4;
 28
 29  cursor: text;
 30
 31}
 32
 33
 34
 35h1:hover a.anchor,
 36
 37h2:hover a.anchor,
 38
 39h3:hover a.anchor,
 40
 41h4:hover a.anchor,
 42
 43h5:hover a.anchor,
 44
 45h6:hover a.anchor {
 46
 47  text-decoration: none;
 48
 49}
 50
 51
 52
 53h1 tt,
 54
 55h1 code {
 56
 57  font-size: inherit !important;
 58
 59}
 60
 61
 62
 63h2 tt,
 64
 65h2 code {
 66
 67  font-size: inherit !important;
 68
 69}
 70
 71
 72
 73h3 tt,
 74
 75h3 code {
 76
 77  font-size: inherit !important;
 78
 79}
 80
 81
 82
 83h4 tt,
 84
 85h4 code {
 86
 87  font-size: inherit !important;
 88
 89}
 90
 91
 92
 93h5 tt,
 94
 95h5 code {
 96
 97  font-size: inherit !important;
 98
 99}
100
101
102
103h6 tt,
104
105h6 code {
106
107  font-size: inherit !important;
108
109}
110
111
112
113h2 a,
114
115h3 a {
116
117  color: #34495e;
118
119}
120
121
122
123/*一级标题样式*/
124
125h1 span{
126
127display: inline-block;
128
129font-size: 1.5rem;
130
131font-weight: bold;
132
133background: rgba(140,68,250,0.7);
134
135color: #0000FF;
136
137padding: 3px 10px 1px;
138
139border-top-right-radius: 3px;
140
141border-top-left-radius: 3px;
142
143margin-top: 15px;
144
145margin-bottom: 15px;
146
147margin-right: 3px;
148
149}
150
151/*2级标题样式*/
152
153h2 span{
154
155display: inline-block;
156
157font-size: 1.3rem;
158
159font-weight: bold;
160
161background: rgba(239, 112, 96,0.7);
162
163color: #0000FF;
164
165padding: 3px 10px 1px;
166
167border-top-right-radius: 3px;
168
169border-top-left-radius: 3px;
170
171margin-top: 5px;
172
173margin-bottom: 5px;
174
175margin-right: 3px;
176
177
178
179}
180
181/*3级标题样式*/
182
183h3 span{
184
185font-size: 1.1rem ! important;
186
187display: inline-block;
188
189font-weight: bold;
190
191background: rgba(2,171,107,0.7);
192
193color: #0000FF;
194
195padding: 3px 10px 1px;
196
197border-top-right-radius: 3px;
198
199border-top-left-radius: 3px;
200
201margin-right: 3px;
202
203}
204
205
206
207h4 {
208
209  font-size: 1rem;
210
211  color: #0000FF;
212
213}
214
215
216
217h5 {
218
219  font-size: 1rem;
220
221  color: #0000FF;
222
223}
224
225
226
227h6 {
228
229  font-size: 1rem;
230
231  color: #0000FF;
232
233}
234
235
236
237
238
239p,
240
241blockquote,
242
243ul,
244
245ol,
246
247dl,
248
249table {
250
251  margin: 0.8em 0;
252
253}
254
255
256
257li > ol,
258
259li > ul {
260
261  margin: 0 0;
262
263}
264
265
266
267
268
269body > h2:first-child {
270
271  margin-top: 0;
272
273  padding-top: 0;
274
275}
276
277
278
279body > h1:first-child {
280
281  margin-top: 0;
282
283  padding-top: 0;
284
285}
286
287
288
289body > h1:first-child + h2 {
290
291  margin-top: 0;
292
293  padding-top: 0;
294
295}
296
297
298
299body > h3:first-child,
300
301body > h4:first-child,
302
303body > h5:first-child,
304
305body > h6:first-child {
306
307  margin-top: 0;
308
309  padding-top: 0;
310
311}
312
313
314
315a:first-child h1,
316
317a:first-child h2,
318
319a:first-child h3,
320
321a:first-child h4,
322
323a:first-child h5,
324
325a:first-child h6 {
326
327  margin-top: 0;
328
329  padding-top: 0;
330
331}
332
333
334
335h1 p,
336
337h2 p,
338
339h3 p,
340
341h4 p,
342
343h5 p,
344
345h6 p {
346
347  margin-top: 0;
348
349}
350
351
352
353li p.first {
354
355  display: inline-block;
356
357}
358
359
360
361ul,
362
363ol {
364
365  padding-left: 30px;
366
367}
368
369
370
371ul:first-child,
372
373ol:first-child {
374
375  margin-top: 0;
376
377}
378
379
380
381ul:last-child,
382
383ol:last-child {
384
385  margin-bottom: 0;
386
387}
388
389
390
391h3.md-focus:before {
392
393  width: auto;
394
395  height: auto;
396
397  color: rgb(50, 9, 212);
398
399  background-color: #ff5d52;
400
401
402
403  border: 1px solid;
404
405  border-radius: 3px;
406
407  position: absolute;
408
409  left: -1.642857143rem;
410
411  top: 0.357142857rem;
412
413  float: left;
414
415  font-size: 9px;
416
417  padding-left: 2px;
418
419  padding-right: 2px;
420
421  vertical-align: bottom;
422
423  font-weight: 400;
424
425  line-height: normal;
426
427}
428
429
430
431h4.md-focus:before {
432
433  width: auto;
434
435  height: auto;
436
437  color: rgb(50, 9, 212);
438
439  background-color: #ff5d52;
440
441
442
443  border: 1px solid;
444
445  border-radius: 3px;
446
447  position: absolute;
448
449  left: -1.642857143rem;
450
451  top: 0.357142857rem;
452
453  float: left;
454
455  font-size: 9px;
456
457  padding-left: 2px;
458
459  padding-right: 2px;
460
461  vertical-align: bottom;
462
463  font-weight: 400;
464
465  line-height: normal;
466
467}
468
469
470
471h5.md-focus:before {
472
473  width: auto;
474
475  height: auto;
476
477  color: rgb(50, 9, 212);
478
479  background-color: #ff5d52;
480
481
482
483  border: 1px solid;
484
485  border-radius: 3px;
486
487  position: absolute;
488
489  left: -1.642857143rem;
490
491  top: 0.357142857rem;
492
493  float: left;
494
495  font-size: 9px;
496
497  padding-left: 2px;
498
499  padding-right: 2px;
500
501  vertical-align: bottom;
502
503  font-weight: 400;
504
505  line-height: normal;
506
507}
508
509
510
511h6.md-focus:before {
512
513  width: auto;
514
515  height: auto;
516
517  color: rgb(50, 9, 212);
518
519  background-color: #ff5d52;
520
521
522
523  border: 1px solid;
524
525  border-radius: 3px;
526
527  position: absolute;
528
529  left: -1.642857143rem;
530
531  top: 0.357142857rem;
532
533  float: left;
534
535  font-size: 9px;
536
537  padding-left: 2px;
538
539  padding-right: 2px;
540
541  vertical-align: bottom;
542
543  font-weight: 400;
544
545  line-height: normal;
546
547}
548
549注意：只有3-6级标题有效，1-2级别标题是没效果的额。

效果展示

案例：h1-h6标题风格设置（边框+分割线版）-2022.9.11

配置方法

  1/*=====================================================================h1-h6级标题 设置===================================================================*/
  2
  3h1,
  4
  5h2,
  6
  7h3,
  8
  9h4,
 10
 11h5,
 12
 13h6 {
 14
 15  position: relative;
 16
 17  margin-top: 1rem;
 18
 19  margin-bottom: 1rem;
 20
 21  font-weight: bold;
 22
 23  line-height: 1.4;
 24
 25  cursor: text;
 26
 27}
 28
 29
 30
 31h1:hover a.anchor,
 32
 33h2:hover a.anchor,
 34
 35h3:hover a.anchor,
 36
 37h4:hover a.anchor,
 38
 39h5:hover a.anchor,
 40
 41h6:hover a.anchor {
 42
 43  text-decoration: none;
 44
 45}
 46
 47
 48
 49h1 tt,
 50
 51h1 code {
 52
 53  font-size: inherit !important;
 54
 55}
 56
 57h2 tt,
 58
 59h2 code {
 60
 61  font-size: inherit !important;
 62
 63}
 64
 65h3 tt,
 66
 67h3 code {
 68
 69  font-size: inherit !important;
 70
 71}
 72
 73h4 tt,
 74
 75h4 code {
 76
 77  font-size: inherit !important;
 78
 79}
 80
 81h5 tt,
 82
 83h5 code {
 84
 85  font-size: inherit !important;
 86
 87}
 88
 89h6 tt,
 90
 91h6 code {
 92
 93  font-size: inherit !important;
 94
 95}
 96
 97h2 a,
 98
 99h3 a {
100
101  color: #34495e;
102
103}
104
105
106
107
108
109/* h1 一级标题样式 */
110
111\#write h1 {
112
113  font-size: 1.5rem;
114
115  font-family: "华康手札体W5P";
116
117
118
119  border-bottom: 2px solid rgba(140,68,250,0.7);
120
121}
122
123\#write h1 span {
124
125 display: inline-block;
126
127 font-weight: bold;
128
129 background: rgba(140,68,250,0.7);
130
131 color: blue;
132
133
134
135 padding: 3px 10px 1px;
136
137 border-top-right-radius: 3px;
138
139 border-top-left-radius: 3px;
140
141 margin-right: 3px;
142
143}
144
145\#write h1:after {
146
147 display: inline-block; 
148
149 content: "";
150
151 vertical-align: bottom;
152
153 /* 三角高度设置 */
154
155 border-bottom: 42px solid #C0C0C0;
156
157 /* 三角右边长度设置 */
158
159 border-right: 20px solid transparent;
160
161}
162
163
164
165/* h2 二级标题样式 */
166
167\#write h2 {
168
169  font-size: 1.3rem;
170
171  font-family: "华康手札体W5P";
172
173
174
175  border-bottom: 2px solid rgb(239, 112, 96);
176
177}
178
179\#write h2 span {
180
181 display: inline-block;
182
183 font-weight: bold;
184
185 background: rgb(239, 112, 96);
186
187 color: blue;
188
189
190
191 padding: 3px 10px 1px;
192
193 border-top-right-radius: 3px;
194
195 border-top-left-radius: 3px;
196
197 margin-right: 3px;
198
199}
200
201\#write h2:after {
202
203 display: inline-block; 
204
205 content: "";
206
207 vertical-align: bottom;
208
209 /* 三角高度设置 */
210
211 border-bottom: 36px solid #C0C0C0;
212
213 /* 三角右边长度设置 */
214
215 border-right: 20px solid transparent;
216
217}
218
219
220
221/* h3 三级标题样式 */
222
223\#write h3 {
224
225  font-size: 1.1rem;
226
227  font-family: "华康手札体W5P";
228
229
230
231  border-bottom: 2px solid rgba(2,171,107,0.7);
232
233}
234
235\#write h3 span {
236
237 display: inline-block;
238
239 font-weight: bold;
240
241 background: rgba(2,171,107,0.7);
242
243 color: blue;
244
245
246
247 padding: 3px 10px 1px;
248
249 border-top-right-radius: 3px;
250
251 border-top-left-radius: 3px;
252
253 margin-right: 3px;
254
255}
256
257\#write h3:after {
258
259 display: inline-block; 
260
261 content: "";
262
263 vertical-align: bottom;
264
265 /* 三角高度设置 */
266
267 border-bottom: 30px solid #C0C0C0;
268
269 /* 三角右边长度设置 */
270
271 border-right: 20px solid transparent;
272
273}
274
275
276
277
278
279/* h4 四级标题样式 */
280
281\#write h4 {
282
283  font-size: 1rem;
284
285  font-family: "华康手札体W5P";
286
287
288
289  border-bottom: 2px solid #FCE6C9;
290
291}
292
293\#write h4 span {
294
295 display: inline-block;
296
297 font-weight: bold;
298
299 background: #FCE6C9;
300
301 color: blue;
302
303
304
305 padding: 3px 10px 1px;
306
307 border-top-right-radius: 3px;
308
309 border-top-left-radius: 3px;
310
311 margin-right: 3px;
312
313}
314
315\#write h4:after {
316
317 display: inline-block; 
318
319 content: "";
320
321 vertical-align: bottom;
322
323 /* 三角高度设置 */
324
325 border-bottom: 27px solid #C0C0C0;
326
327 /* 三角右边长度设置 */
328
329 border-right: 20px solid transparent;
330
331}
332
333
334
335
336
337
338
339/* h5 五级标题样式 */
340
341\#write h5 {
342
343  font-size: 0.9rem;
344
345  font-family: "华康手札体W5P";
346
347
348
349  border-bottom: 2px solid #33A1C9;
350
351}
352
353\#write h5 span {
354
355 display: inline-block;
356
357 font-weight: bold;
358
359 background: #33A1C9;
360
361 color: blue;
362
363
364
365 padding: 3px 10px 1px;
366
367 border-top-right-radius: 3px;
368
369 border-top-left-radius: 3px;
370
371 margin-right: 3px;
372
373}
374
375\#write h5:after {
376
377 display: inline-block; 
378
379 content: "";
380
381 vertical-align: bottom;
382
383 /* 三角高度设置 */
384
385 border-bottom: 26px solid #C0C0C0;
386
387 /* 三角右边长度设置 */
388
389 border-right: 20px solid transparent;
390
391}
392
393
394
395/* h6 六级标题样式 */
396
397\#write h6 {
398
399  font-size: 0.8rem;
400
401  font-family: "华康手札体W5P";
402
403
404
405  border-bottom: 2px solid #FFC0CB;
406
407}
408
409\#write h6 span {
410
411 display: inline-block;
412
413 font-weight: bold;
414
415 background: #FFC0CB;
416
417 color: blue;
418
419
420
421 padding: 3px 10px 1px;
422
423 border-top-right-radius: 3px;
424
425 border-top-left-radius: 3px;
426
427 margin-right: 3px;
428
429}
430
431\#write h6:after {
432
433 display: inline-block; 
434
435 content: "";
436
437 vertical-align: bottom;
438
439 /* 三角高度设置 */
440
441 border-bottom: 25px solid #C0C0C0;
442
443 /* 三角右边长度设置 */
444
445 border-right: 20px solid transparent;
446
447}

效果展示

问题：能否定制无限级别的标题

测试

这个在css里添加的h7, h8代码，typora里是无法识别的：

案例：这个绿色风格也不错的哦-2022.9.11

来源配色2.css：

配置代码

1h1 {
2
3	font-size: 28px;
4
5	color: #1EA089;
6
7}

案例：这个蓝色风格也不错的哦-2022.9.12

来源blue-plum.css：

配置代码

 1/* h1 一级标题样式 */
 2
 3h1 {
 4
 5  font-family: "华康手札体W5P";
 6
 7  font-size:32px !important;
 8
 9  /* line-height:1.6; */
10
11  /* margin: 2.6rem auto 3.6rem !important; */
12
13  text-align: center;
14
15  display:block;
16
17  color:var(--main-color-2);
18
19}
20
21h1:after{
22
23  content:"";
24
25  width:80px;
26
27  height:2px;
28
29  display: block;
30
31  border-bottom:2px solid var(--main-color-2);
32
33  margin:-4px auto 0;
34
35}
36
37
38
39--main-color-2: #1677b3;

效果展示

案例：这个绿色风格也不错的哦-2022.9.14

来源cyan-moon.css：

 1h1 {
 2
 3    text-align: center;
 4
 5    font-size: 2.2rem;
 6
 7    line-height: 1.2;
 8
 9    margin: 2.8rem auto 2.2rem;
10
11    color: var(--main-color-11);
12
13  }
14
15
16
17--main-color-11: #0BABAB;

链接

案例：小图标

更改后效果如下：

配置代码：

 1/* 链接 */
 2#write a:not(.md-toc-inner) {
 3  /* color: #000; */
 4  color: magenta;
 5  border-bottom: 1px solid #ffb143;
 6  text-decoration: none;
 7  transform: all linear 0.1s;
 8}
 9
10#write a:hover:not(.md-toc-inner) {
11  /* font-weight: bolder; */
12  color: #e46918;
13  border-bottom: 1px solid #e46918;
14  transform: all linear 0.1s;
15}
16
17#write p a:not(.md-toc-inner)::before {
18  content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath  d='M477.934459 330.486594A50.844091 50.844091 0 0 1 406.752731 258.796425L512 152.532274a254.220457 254.220457 0 0 1 359.467726 359.467726L762.66137 618.772592a50.844091 50.844091 0 1 1-71.690168-71.690169l106.772591-106.772592a152.532274 152.532274 0 0 0-215.578947-215.578947z m70.164846 361.501489A50.844091 50.844091 0 1 1 619.789474 762.66137l-107.281033 107.281033A254.220457 254.220457 0 0 1 152.532274 512L259.813307 406.752731a50.844091 50.844091 0 1 1 72.19861 69.656405l-107.789474 107.281033a152.532274 152.532274 0 0 0 215.578947 215.578947z m-126.601788-16.77855a50.844091 50.844091 0 1 1-71.690168-71.690169l251.678252-251.678252a50.844091 50.844091 0 0 1 71.690169 71.690169z'/%3E%3C/svg%3E");
19  color: #f68800;
20  display: inline-block;
21  width: 1em;
22  height: 1em;
23  margin-right: 0.2em;
24  vertical-align: sub;
25}
26
27#write sup a::before {
28  content: none;
29}

案例：云朵风格

配置方法

 1/*
 2
 3  链接设置：
 4
 5	urls settings
 6
 7*/
 8
 9\#write a {
10
11	color: Magenta;
12
13	text-decoration: none;
14
15  font-weight: 600;
16
17  padding: 0 2px;
18
19  text-decoration: none;
20
21  border-bottom: 1px solid #00BFFF;
22
23}
24
25\#write a:hover {
26
27	color: #04BAFB;;
28
29	text-decoration: none;	
30
31}
32
33\#write a:before {
34
35	/*标题左边logo中的文本*/
36
37	content: "☁";
38
39	text-align: center;
40
41	/*设置 logo 垂直居中 要与字体高度一致方可*/
42
43	line-height: 1.6rem;
44
45	/*确保标题和logo在同一行*/
46
47	display: inline-block;
48
49	/*标题与logo间距*/
50
51	margin-right: 0.2em;
52
53	width: 1.6rem;
54
55	height: 1.6rem;
56
57	color: var(--h-sign);
58
59}

效果展示

案例：云朵+按钮风格

哈哈，这个风格还是不推荐了，很丑的，如果链接出现在了正文后。

配置方法

 1/*=====================================================================链接 设置===================================================================*/
 2
 3/* 链接风格设置 */
 4
 5[md-inline] a {
 6
 7  background-color: #dbe2ef;
 8
 9  color: Magenta;
10
11  text-decoration: none;
12
13  font-weight: 600;
14
15
16
17  padding: 0 8px;
18
19  padding-top:5px;
20
21  padding-bottom:5px;
22
23  box-shadow:4px 4px 4px #aaa;
24
25  blur:2px;
26
27  border-radius: 20px;
28
29}
30
31
32
33/* 聚焦时链接的颜色 */
34
35\#write a:hover {
36
37	color: #04BAFB;;
38
39	text-decoration: none;	
40
41}
42
43
44
45\#write a:before {
46
47	/*标题左边logo中的文本*/
48
49	content: "☁";
50
51	text-align: center;
52
53	/*设置 logo 垂直居中 要与字体高度一致方可*/
54
55	line-height: 1.6rem;
56
57	/*确保标题和logo在同一行*/
58
59	display: inline-block;
60
61	/*标题与logo间距*/
62
63	margin-right: 0.2em;
64
65	width: 1.6rem;
66
67	height: 1.6rem;
68
69	color: var(--h-sign);
70
71}

效果展示

背景

示例：选中文本背景颜色修改

配置方法

  1/* 
  2
  3选中文背景颜色修改
  4
  5bg color when text is selected 
  6
  7*/
  8
  9div::selection {
 10
 11  background: var(--main-color);
 12
 13  color: white;
 14
 15  }
 16
 17
 18
 19  div::-moz-selection {
 20
 21  background: var(--main-color);
 22
 23  color: white;
 24
 25  }
 26
 27
 28
 29  div::-webkit-selection {
 30
 31  background: var(--main-color);
 32
 33  color: white;
 34
 35  }
 36
 37
 38
 39  blockquote::selection {
 40
 41  background: var(--main-color);
 42
 43  color: white;
 44
 45  }
 46
 47
 48
 49  blockquote::-moz-selection {
 50
 51  background: var(--main-color);
 52
 53  color: white;
 54
 55  }
 56
 57
 58
 59  blockquote::-webkit-selection {
 60
 61  background: var(--main-color);
 62
 63  color: white;
 64
 65  }
 66
 67
 68
 69  p::selection {
 70
 71  background: var(--main-color);
 72
 73  color: white;
 74
 75  }
 76
 77
 78
 79  p::-moz-selection {
 80
 81  background: var(--main-color);
 82
 83  color: white;
 84
 85  }
 86
 87
 88
 89  p::-webkit-selection {
 90
 91  background: var(--main-color);
 92
 93  color: white;
 94
 95  }
 96
 97
 98
 99  label::selection {
100
101  background: var(--main-color);
102
103  color: white;
104
105  }
106
107
108
109  label::-moz-selection {
110
111  background: var(--main-color);
112
113  color: white;
114
115  }
116
117
118
119  label::-webkit-selection {
120
121  background: var(--main-color);
122
123  color: white;
124
125  }
126
127
128
129  span::selection {
130
131  background: var(--main-color);
132
133  color: white;
134
135  }
136
137
138
139  span::-moz-selection {
140
141  background: var(--main-color);
142
143  color: white;
144
145  }
146
147
148
149  span::-webkit-selection {
150
151  background: var(--main-color);
152
153  color: white;
154
155  }
156
157
158
159  h1::selection {
160
161  background: var(--main-color);
162
163  color: white;
164
165  }
166
167
168
169  h1::-moz-selection {
170
171  background: var(--main-color);
172
173  color: white;
174
175  }
176
177
178
179  h1::-webkit-selection {
180
181  background: var(--main-color);
182
183  color: white;
184
185  }
186
187
188
189  h2::selection {
190
191  background: var(--main-color);
192
193  color: white;
194
195  }
196
197
198
199  h2::-moz-selection {
200
201  background: var(--main-color);
202
203  color: white;
204
205  }
206
207
208
209  h2::-webkit-selection {
210
211  background: var(--main-color);
212
213  color: white;
214
215  }
216
217
218
219  h3::selection {
220
221  background: var(--main-color);
222
223  color: white;
224
225  }
226
227
228
229  h3::-moz-selection {
230
231  background: var(--main-color);
232
233  color: white;
234
235  }
236
237
238
239  h3::-webkit-selection {
240
241  background: var(--main-color);
242
243  color: white;
244
245  }
246
247
248
249  h4::selection {
250
251  background: var(--main-color);
252
253  color: white;
254
255  }
256
257
258
259  h4::-moz-selection {
260
261  background: var(--main-color);
262
263  color: white;
264
265  }
266
267
268
269  h4::-webkit-selection {
270
271  background: var(--main-color);
272
273  color: white;
274
275  }
276
277
278
279  h5::selection {
280
281  background: var(--main-color);
282
283  color: white;
284
285  }
286
287
288
289  h5::-moz-selection {
290
291  background: var(--main-color);
292
293  color: white;
294
295  }
296
297
298
299  h5::-webkit-selection {
300
301  background: var(--main-color);
302
303  color: white;
304
305  }
306
307
308
309  code::selection {
310
311  background: var(--main-color);
312
313  color: white;
314
315  }
316
317
318
319  code::-moz-selection {
320
321  background: var(--main-color);
322
323  color: white;
324
325  }
326
327
328
329  code::-webkit-selection {
330
331  background: var(--main-color);
332
333  color: white;
334
335  }

效果展示

示例：设置空白typora文档时的背景颜色（骚里骚气哈哈）

配置方法

 1/*=========================================================打开空白笔记展示笔记封面================================================*/
 2
 3\#write > p:first-child:not(:only-child)::before, #write > p:only-child::before {
 4
 5  background: url("./image/blue-plum.png") no-repeat 55% 90% transparent;
 6
 7  background-size: cover;
 8
 9}
10
11
12
13\#write > p:first-child:empty {
14
15  position: static;
16
17}
18
19
20
21\#write > p:only-child:empty::before {
22
23  content: '';
24
25  display: block;
26
27  position: absolute;
28
29  top: 0;
30
31  left: 0;
32
33  right: 0;
34
35  bottom: 0;
36
37  background: url("./image/blue-plum.png") no-repeat 45% 90% transparent;
38
39  background-size: cover;
40
41  -webkit-background-size: cover;
42
43  -moz-background-size: cover;
44
45  -o-background-size: cover;
46
47}

效果展示

打开一个空白文档是，就有花花背景出现了哈哈。

当输入内容时，花花就消失了。

示例：设置搜索框字体及背景颜色

配置方法

 1/*ctrl f：搜索框字体及背景颜色设置*/
 2
 3\#md-searchpanel input {
 4
 5  height: 26px;
 6
 7  background: inherit;
 8
 9  color: red;
10
11  background-color: #ff0;
12
13  border-radius: 0;
14
15  width: 100%;
16
17  font-size: 18px;
18
19}

效果展示

示例：设备背景图片

方法1：抠图方法

修改方法

以这张图片为背景：

利用wps把自己想要的图片背景给去掉：

然后用wps打开这个被抠过图的照片，然后打开上面那张green照片作为背景，然后调整抠过图的照片的大小，进行截图即可。

具体照片如下：

代码如下：

 1  /* 
 2
 3  typora背景图 
 4
 5  */
 6
 7  background: url(./image/高圆圆1.png);
 8
 9  background-size: cover;
10
11  background-repeat: no-repeat;
12
13  background-attachment: scroll;

效果展示

方法2：护眼绿配置方法

配置方法

 1/* root里定义的是界面颜色、文字颜色等。 */
 2
 3:root {
 4
 5    --side-bar-bg-color: #c7e6c8;
 6
 7    --control-text-color: #777;
 8
 9	--background-color: #c7edcc;
10
11	background: url('./bg_image/v-34.png')  repeat
12
13}
14
15
16
17
18
19/* 定义的是侧边栏 */
20
21\#typora-sidebar {
22
23	background: url('./bg_image/v-35.png')  repeat
24
25}

细节:

 1:root {
 2
 3    --side-bar-bg-color: #c7e6c8;
 4
 5    --control-text-color: #777;
 6
 7  \#background-color: #c7edcc;
 8
 9  background: url('./bg_image/v-34.png')  repeat
10
11}

是600*600大小的图片：

效果如下

示例：打开空白笔记展示笔记封面设置

配置方法

 1/*=========================================================打开空白笔记展示笔记封面 设置================================================*/
 2
 3\#write > p:first-child:not(:only-child)::before, #write > p:only-child::before {
 4
 5  background: url("./image/blue-plum.png") no-repeat 55% 90% transparent;
 6
 7  background-size: cover;
 8
 9}
10
11
12
13\#write > p:first-child:empty {
14
15  position: static;
16
17}
18
19
20
21\#write > p:only-child:empty::before {
22
23  content: '';
24
25  display: block;
26
27  position: absolute;
28
29  top: 0;
30
31  left: 0;
32
33  right: 0;
34
35  bottom: 0;
36
37  background: url("./image/blue-plum.png") no-repeat 45% 90% transparent;
38
39  background-size: cover;
40
41  -webkit-background-size: cover;
42
43  -moz-background-size: cover;
44
45  -o-background-size: cover;
46
47}

效果展示

或者是其他图片：

 1/*=========================================================打开空白笔记展示笔记封面 设置 start================================================*/
 2#write>p:first-child:not(:only-child)::before,
 3#write>p:only-child::before {
 4    background: url("./image/lover.png") no-repeat 55% 90% transparent;
 5    /* background: url("./image/blue-plum.png") no-repeat 55% 90% transparent; */
 6    background-size: cover;
 7}
 8
 9#write>p:first-child:empty {
10    position: static;
11}
12
13#write>p:only-child:empty::before {
14    content: '';
15    display: block;
16    position: absolute;
17    top: 0;
18    left: 0;
19    right: 0;
20    bottom: 0;
21    background: url("./image/lover.png") no-repeat 45% 90% transparent;
22    /* background: url("./image/blue-plum.png") no-repeat 45% 90% transparent; */
23    background-size: cover;
24    -webkit-background-size: cover;
25    -moz-background-size: cover;
26    -o-background-size: cover;
27}
28/*=========================================================打开空白笔记展示笔记封面 设置 end================================================*/

root字段

配置方法

 1:root {
 2
 3    --text-color: #666;
 4
 5    --bg-color: #fff;
 6
 7    --code-block-bg-color: #4d4d4d;
 8
 9    --side-bar-bg-color: #fdf6f5;
10
11    --window-border: 1px solid #555;
12
13
14
15    --active-file-bg-color: #fff;
16
17    --active-file-text-color: #666;
18
19    --item-hover-text-color: #666;
20
21    --control-text-color: #777;
22
23    }

效果展示

 1:root {
 2
 3  --side-bar-bg-color: rgba(231,153,176,0.5);
 4
 5  --window-border: 2px solid #E799B0;
 6
 7  --main-color: rgba(128, 30, 255, 1);
 8
 9  --shadow-color : rgb(178, 80, 255);
10
11  --transplate-color : rgba(128, 30, 255, 0.1);
12
13  --dark-color : rgb(70, 18, 137);
14
15  --light-color : rgb(248, 242, 255);
16
17  --font-color : rgb(12, 12, 12);
18
19  --base-font : "Glow Sans", "Microsoft YaHei", serif;
20
21  --title-font: "Roboto Slab", "Times", serif;
22
23  --blockquote-font : "Times", "Roboto Slab", serif;
24
25  --blockquote-color : rgba(117, 117, 117, 0.9);
26
27  --monospace: "Cascadia code", "Courier New", monospace; 
28
29
30
31  /* --background : url("https://cdn.jsdelivr.net/gh/LSTM-Kirigaya/KImage/Img/2k.jpg"); */
32
33
34
35  --quote-title-font-size : 0.9em;
36
37  --quote-tag-font-size : 1.1em;
38
39
40
41  /* typora GUI config */
42
43  --sidebar-font-color : black;
44
45  --main-panel-font-color : black;
46
47}

vscode里，ctrl单机这个变量后，就可以看到那些地方用到了这个变量的：

小图标

常见图标：

分割线

配置方法：

 1/* 分割线设置 */
 2
 3hr {
 4
 5  margin-top: 20px;
 6
 7  margin-bottom: 20px;
 8
 9  border: 0;
10
11    border-top-color: rgb(66, 165, 245);
12
13    border-top-style: solid;
14
15    border-top-width: 1px;
16
17    border-right-color: initial;
18
19    border-right-style: initial;
20
21    border-right-width: 0px;
22
23    border-bottom-color: initial;
24
25    border-bottom-style: initial;
26
27    border-bottom-width: 0px;
28
29    border-left-color: initial;
30
31    border-left-style: initial;
32
33    border-left-width: 0px;
34
35    border-image-source: initial;
36
37    border-image-slice: initial;
38
39    border-image-width: initial;
40
41    border-image-outset: initial;
42
43    border-image-repeat: initial;
44
45  border-top: 1px solid #42a5f5;
46
47    border-top-width: 1px;
48
49    border-top-style: solid;
50
51    border-top-color: rgb(66, 165, 245);
52
53}

效果展示

yaml

配置方法

 1/*=====================================================================yaml 设置===================================================================*/
 2
 3/*
 4
 5  yaml设置：
 6
 7	yaml header settings
 8
 9	YAML Front Matter
10
11
12
13	YAML
14
15	YAML是YAML Ain't Markup Language递归缩写，即YAML不是标记语言的意思
16
17	YAML是便于人阅读基于unicode编码的各种语言的序列号标准。它的用途广泛，用于配置文件，日志文件，跨语言数据共享，对象持久化，复杂的数据结构
18
19
20
21	Front Matter 
22
23	前言；前文部分
24
25	在YAML Front Matter中可以表明文章的信息（方便各种语言获取），设置一些环境中的格式，定义一些变量，甚至自定义一些变量（方便在不同语言环境下，达到想要的效果）
26
27*/
28
29\#write pre.md-meta-block {
30
31	font-family: var(--monospace-font);
32
33	font-size: 1rem;
34
35	text-align: left;	
36
37	color: var(--code-color);
38
39	background-color: var(--code-background-color);
40
41
42
43  padding: 1rem;
44
45  border: 0;
46
47  border-radius: 20px 20px 20px 20px;
48
49  margin-top: 0 !important;
50
51}

效果展示

结尾

配置方法

 1/*===========================================================文章底部END 设置===================================================================*/
 2
 3\#write:after{
 4
 5  font-size:18px;
 6
 7  font-family:'optima regular';
 8
 9  content:"End(双向奔赴，不离不弃)";
10
11  color: var(--main-color-4);
12
13  font-weight: bold;
14
15  text-align:center;
16
17  margin-top:3rem;
18
19  display:block;
20
21}

效果展示

body字段

配置方法

 1html {
 2
 3    font-size: 18px;
 4
 5}
 6
 7
 8
 9body {
10
11    font-family: "华康手札体W5P",'Microsoft YaHei',"SimSun","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
12
13    color: rgb(51, 51, 51);
14
15    line-height: 1.6;
16
17}
18
19![img](D:\BaiduSyncdisk\LocalImgs\1664791724870-8ff0aa68-94f6-43bd-8b0f-20332ba4d265.png)

效果展示

书写区域宽度

案例1：阴影效果

配置方法

 1\#write{
 2
 3    max-width: 960px; /*注意这个是控制编辑的宽度的：可以是100%，980px；*/
 4
 5    margin-top:    30px; /*top*/
 6
 7    margin-bottom: 30px;
 8
 9    padding: 100px 60px; /*top to title padding*/
10
11    border-radius: 5px;
12
13    -o-box-shadow: 0 10px 10px #333333;
14
15    -webkit-box-shadow: 0 10px 10px #333333;
16
17    -moz-box-shadow: 0 10px 10px #333333;
18
19    box-shadow: 0px 50px 100px #333333;
20
21}
22
23\#write > ul:first-child,
24
25\#write > ol:first-child{
26
27    margin-top: 30px;
28
29}

效果展示

案例2：全屏

配置方法

 1/* 
 2
 3写区 
 4
 5*/
 6
 7\#write{
 8
 9  /* background-color: #fff !important;   */
10
11  /* background-color: #C7EDCC !important;   */
12
13  max-width: 96%; /*注意这个是控制编辑的宽度的：可以是100%，980px；*/
14
15  margin-top:    30px; /*top 这个是上面阴影宽度*/
16
17  margin-bottom: 30px; /*top 这个是下面阴影宽度*/
18
19  padding: 10px 10px; /*top to title padding*/
20
21  border-radius: 5px;
22
23  /* -o-box-shadow: 0 10px 10px pink;
24
25  -webkit-box-shadow: 0 10px 10px pink;
26
27  -moz-box-shadow: 0 10px 10px pink;
28
29  box-shadow: 0 50px 100px pink; */
30
31}

效果展示

案例3：有小的边框

配置方法

 1/*=====================================================================写区================================================*/
 2
 3\#write{
 4
 5  /* background: url("./image/gyybeauty.png") no-repeat;
 6
 7  background-size: 10%;
 8
 9  background-position: 98% bottom;
10
11  background-attachment: fixed; */
12
13
14
15  max-width: 96%; /*注意这个是控制编辑的宽度的：可以是100%，980px；*/
16
17  margin-top:    30px; /*top 这个是上面阴影宽度*/
18
19  margin-bottom: 30px; /*top 这个是下面阴影宽度*/
20
21  padding: 10px 10px; /*top to title padding*/
22
23  border-radius: 5px;
24
25  -o-box-shadow: 0 10px 10px pink;
26
27  -webkit-box-shadow: 0 10px 10px pink;
28
29  -moz-box-shadow: 0 10px 10px pink;
30
31  box-shadow: 0 50px 100px pink;
32
33
34
35}

效果展示

引用

案例：绿色

配置方法

 1blockquote {
 2
 3    border-left: 4px solid #42b983;
 4
 5    padding: 10px 15px;
 6
 7    color: #777;
 8
 9    background-color: rgba(66, 185, 131, .1);
10
11}

效果展示

案例：月亮

配置方法

 1/*=====================================================================引用段落(quote) 设置===================================================================*/
 2
 3blockquote p:first-of-type::before{
 4
 5  content: "☽";
 6
 7  position: relative;
 8
 9  font-size: 3em;
10
11  padding: 0 .5rem;
12
13  color: #0dc8c4;
14
15  font-family: Arial, serif;
16
17  line-height: 0.7em;
18
19  font-weight: 700;
20
21}
22
23
24
25blockquote {
26
27  border: 2px double #0cb4b0; 
28
29  border-radius: 6px;
30
31  margin: 3rem auto;
32
33  padding: 10px 15px 26px;
34
35  color: black !important;
36
37  /* background-color: rgba(66, 185, 131, .1); */
38
39  /* background-color: pink; */
40
41  /* background-color: #F5DEB3; */
42
43  background-color: #FFEFD5;
44
45  /* box-shadow: 4px 4px 8px 2px #B2B2B2; */
46
47  font-family: 'HelveticaN', Arial, "kaiti","pingfangSC light", "microsoft yahei" !important;
48
49}

效果展示

案例：红-黄

配置方法

 1/*=====================================================================引用段落(quote) 设置===================================================================*/
 2
 3blockquote {
 4
 5  border-left: 4px solid #CD00CD;
 6
 7  padding: 10px 15px;
 8
 9  color: var(--color-black);
10
11  background-color: #DEB887;
12
13  border-radius : 0.5em;
14
15}

效果展示

案例：小花花

配置方法

 1/*=====================================================================引用 设置===================================================================*/
 2
 3/* 小花花 设置 */
 4
 5blockquote p:first-of-type::before{
 6
 7  display:inline;
 8
 9  content: "❀";
10
11  position: relative;
12
13  font-size: 2rem;
14
15  padding: 0 .3rem;
16
17  color: var(--blockquote-border-color);
18
19  font-family: Arial;
20
21}
22
23/* 引用设置 */
24
25blockquote {
26
27  border-left: 4px solid #CD00CD;
28
29  padding: 10px 15px;
30
31  color: var(--color-black);
32
33  background-color: #DEB887;
34
35  border-radius : 0.5em;
36
37}
38
39/* 引用里字体加粗效果 */
40
41blockquote strong{
42
43color:#FA6A82 !important;
44
45}

效果展示

流程图

案例：紫色

配置方法

 1/* 流程图 */
 2
 3  /* --mermaid-theme: default; */
 4
 5  /*or base, dark, forest, neutral, night */
 6
 7  --mermaid-theme: night;/*or base, dark, forest, neutral, night */
 8
 9  --mermaid-font-family: "trebuchet ms", verdana, arial, sans-serif;
10
11  --mermaid-sequence-numbers: on; /* or "on", see https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=sequencenumbers*/
12
13  --mermaid-flowchart-curve: linear /* or "basis", see https://github.com/typora/typora-issues/issues/1632*/;
14
15  --mermaid--gantt-left-padding: 75; /* see https://github.com/typora/typora-issues/issues/1665*/

效果展示

字体

Typora里好看的中文字体推荐下(gpt回答-2023.8.24)

Typora里好看的中文字体推荐下

在 Typora 中选择适合的中文字体可以提升阅读体验和视觉效果。以下是几款在 Typora 中常用且美观的中文字体推荐：

宋体：比如宋体、仿宋等。作为中文传统明朝体的代表，较为正式和经典。
黑体：比如方正黑体、思源黑体等。黑体字形端正，粗细均匀，适合用于标题和强调的文字。
微软雅黑：作为一款无衬线字体，简洁清晰，适合用于屏幕显示和阅读。
华文中宋：华文系列中文字体之一，结合了宋体和新细明体的特点，有一定的书法气息。
Work Sans（思源黑体的变体）：作为一种开源字体，Work Sans 在 Typora 中也有很好的表现，具有现代感。

您可以在 Typora 的设置选项中找到字体设置，根据喜好尝试不同的中文字体，并根据字体大小和行距进行适当调整，以获得更好的排版效果。

希望这些推荐对您有所帮助，请随时提问，我将竭力为您服务！

字体还可以这样使用

案例：设置正文字体

配置方法：

 1/* 
 2
 3全局设置(global setting )
 4
 5正文字体设置:
 6
 7*/
 8
 9html,
10
11body,
12
13content {
14
15  font-size: 18px;
16
17  font-family: "霞鹜文楷","华康手札体W5P",'Microsoft YaHei',"SimSun","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
18
19  color: rgb(51, 51, 51);
20
21  line-height: 1.6;
22
23}

效果展示

案例：设置加粗字体、倾斜字体颜色

配置方法

 1/*======================================================================文字加粗颜色 设置===================================================================*/
 2
 3p strong {
 4
 5	color:#1EA089;
 6
 7}
 8
 9
10
11/*======================================================================文字倾斜颜色 设置===================================================================*/
12
13p em {
14
15	color:#FDB22F;
16
17	font-weight: bold;
18
19	font-style:normal;
20
21}

效果展示

高亮背景和字体颜色

配置方法

 1/*
 2
 3改变高亮的文字颜色
 4
 5==背景高亮==,
 6
 7mark是符号==xxx==的效果
 8
 9*/
10
11mark {
12
13  background: yellow;
14
15  color: #f22f27;
16
17  font-weight: bold;
18
19  border-bottom: 0px solid #ffffff;
20
21  padding: 0.0px;
22
23  margin: 0 0px;
24
25}

效果展示

任务列表

案例1：紫色【荐】

配置方法

 1/*=======================================================任务列表 设置===================================================================*/
 2
 3/* checkbox */
 4
 5.md-task-list-item > input {
 6
 7  margin-left: -1.3em;
 8
 9  }
10
11
12
13  .md-task-list-item > input {
14
15  margin-left: -1.3em;
16
17  }
18
19
20
21
22
23.md-task-list-item:hover > input:before,
24
25input[type='checkbox']:hover:before {
26
27  opacity: 1;
28
29  transition: 0.3s;
30
31  background-color: var(--shadow-color);
32
33}
34
35
36
37.task-list-item input::before {
38
39    content: "";
40
41    display: inline-block;
42
43  border-radius: .3em;
44
45    vertical-align: middle;
46
47    border: 1.2px solid var(--main-color);
48
49    background-color: #ffffff;
50
51  width: 1.1rem;
52
53    height: 1.1rem;
54
55  margin-left: -0.1rem;
56
57    margin-right: 0.1rem;
58
59    margin-top: -0.68rem; 
60
61}
62
63
64
65.task-list-item input:checked::before {
66
67    padding-left: 0.125em;
68
69    content: '✔';
70
71    color:white;
72
73  background-color: var(--main-color);
74
75    font-size: 0.8rem;
76
77    line-height: 0.95rem;
78
79    margin-top: -0.68rem;
80
81  transition: background-color 200ms ease-in-out;
82
83}
84
85
86
87/* 已办的颜色为灰色，且有删除线 */
88
89\#write .md-task-list-item.task-list-done > p {
90
91  color: #808080; 
92
93  text-decoration: line-through;
94
95}

效果展示

案例：默认github主题

配置方法

1/*=======================================================任务列表 设置===================================================================*/
2
3.md-task-list-item > input {
4
5  margin-left: -1.3em;
6
7}

效果展示

css语法

import语法

gpt回答

2023.8.24

请给我编辑一款优秀的typora主题！

很抱歉，作为文本聊天 AI，我无法直接为你生成和编辑主题文件。但是，我可以向你提供一些指导，帮助你自己设计和编辑 Typora 主题。

选择颜色方案：选择一种适合你审美和写作环境的颜色方案，可以是明亮的、深色的或者中性的。考虑使用颜色搭配工具来找到搭配合适的颜色。
设计字体样式：选择合适的字体和字号，确保显示清晰、易读。可以使用谷歌字体等免费字体资源，定义标题、段落和代码的字体样式。
定义排版规则：通过 CSS 修改 Typora 的默认样式，包括调整标题的大小、行高、段落间距和代码块的样式等。可以参考 Typora 官方文档中的样式指南。
添加自定义样式：通过 CSS 修改其他元素的样式，例如列表、引用、表格等。可以为这些元素添加背景色、边框样式和阴影效果，使其更加醒目。
测试和调整：在编辑主题的过程中，记得不断地在 Typora 中测试你的修改，并根据实际效果进行调整。确保字体清晰可读，元素排版合理，避免过于花哨或干扰写作的样式。

以上是一些基本的设计步骤，希望能对你编辑一款优秀的 Typora 主题有所帮助。记得参考 Typora 的官方文档和在社区中学习，以获得更详细和专业的指导。

📡

👤 作者: 余温Gueen

🔗 链接: https://wiki.xxdevops.cn/topic/frxlo

🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自余温Gueen Blog！

推荐使用微信支付

推荐使用支付宝

上一篇 Typora主题测试文件下一篇使用

css定制

目录

个人定制css原则

自定义typora主题

参考链接

主题配置原则

主题名称命名原则

添加自定义 CSS

参考链接

打开主题文件夹

将自定义 CSS 附加到所有主题或其他主题

调试CSS

常用样式定制

代码块

范例：仿mac图标（暗黑）

范例：仿mac图标（白色）

示例：github主题代码风格

示例：material主题代码风格

示例：模拟mac的3个图标(白色)

示例：模拟mac的3个图标（暗黑）

示例：修改代码背景颜色为sublime text3的背景色

示例：修改代码块字体

示例：typora的代码块的光标颜色配置（已配置）

示例：设置代码块下边距

行内代码块

案例

侧边栏

案例：配置侧边栏鼠标悬浮后颜色

示例：设置左侧目录字体

示例：typora左侧文档树搜索框颜色修改

示例：设置右侧滚动滑块的颜色

示例：大纲小三角图标设置

示例：控制 TOC 水平

示例：Typora侧边栏同时查看大纲和文件|添加TabBar

侧边栏选择点

案例：修改侧边栏目录和文档图标

①新建图标库项目

②添加图标到项目

③下载图标源码

④自定义Typora图标

表格

案例

图片

案例：居中、阴影

设置图片默认对齐方式

给图片添加阴影个圆角功能

圆边角设置为20px看起来比较美观-2022.9.14

图片自动编号

h1-h6

案例：小竖条

案例：重影

案例：给三级、四级、五级、六级 标题设置点击后左边的提示图标-2022.7.5

案例：h1-h6级标题风格设置（边框版）-2022.7.4

案例：h1-h6标题风格设置（边框+分割线版）-2022.9.11

问题：能否定制无限级别的标题

案例：这个绿色风格也不错的哦-2022.9.11

案例：这个蓝色风格也不错的哦-2022.9.12

案例：这个绿色风格也不错的哦-2022.9.14

链接

案例：小图标

案例：云朵风格

案例：云朵+按钮风格

背景

示例：选中文本背景颜色修改

示例：设置空白typora文档时的背景颜色（骚里骚气哈哈）

示例：设置搜索框字体及背景颜色

示例：设备背景图片

示例：打开空白笔记展示笔记封面 设置

root字段

小图标

分割线

yaml

结尾

body字段

书写区域宽度

案例1：阴影效果

案例2：全屏

案例3：有小的边框

引用

案例：绿色

案例：给三级、四级、五级、六级标题设置点击后左边的提示图标-2022.7.5

示例：打开空白笔记展示笔记封面设置