惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

G
Google Developers Blog
阮一峰的网络日志
阮一峰的网络日志
博客园 - 聂微东
F
Fortinet All Blogs
H
Help Net Security
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
D
DataBreaches.Net
MyScale Blog
MyScale Blog
B
Blog
I
InfoQ
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
GbyAI
GbyAI
Google DeepMind News
Google DeepMind News
IT之家
IT之家
The GitHub Blog
The GitHub Blog
有赞技术团队
有赞技术团队
博客园_首页
L
LangChain Blog
V
V2EX
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
T
The Blog of Author Tim Ferriss
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Microsoft Azure Blog
Microsoft Azure Blog
博客园 - Franky

Xiaobin's Notes

Mac本地快速部署DeepSeek Electron的原理 如何让大语言模型输出JSON格式 webstorm 的 cpu 占用高 ECMAScript 历代版本 新一代包管理器 PNPM React useEffect() Hook Vue 2.x 使用高德地图JS API 2.0加载起点终点路径轨迹 家庭用电插座 MacOS 14.4 引发Java 应用崩溃 重定向广告 Pyenv工具 ElasticSearch集群原理 ElasticSearch集群节点 Elasticsearch Mapping 参数 Elasticsearch元数据 Elasticsearch的数据类型 Go语言的向后兼容和toolchain规则 Go 1.21 新增特性
修改Joplin主题样式
xbl · 2024-07-21 · via Xiaobin's Notes
  • Joplin主题
    • macos theme plugin
  • Markdown渲染样式
    • 问题及解决方法

Joplin主题

直接在设置中的“插件”选项中搜索 “macos theme”安装,然后重启后打开macos theme 这个插件,打开该插件对应的设置页面,将样式调成_light_模式,同时Joplin本身的外观设置也需要保持_亮色_模式。再次重启Joplin,发现全局主题已经改变。此外,该插件主题也同时支持暗色主题和自定义主题颜色。

Markdown渲染样式

将源码复制至Joplin配置中的_userstyle.css_中即可,该配置文件可以从_工具_——>_选项_——>_外观_——>_显示高级选项_——>_适用于已渲染Markdown的自定义样式表_中找到。Mac 下路径为

~/.config/joplin-desktop/userstyle.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

pre, code {
font-size: 14px;
font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace;
margin: auto 5px;
}

code {
white-space: pre-wrap;
border-radius: 2px;
display: inline;
}

pre {
font-size: 15px;
line-height: 1.4em;
display: block; !important;
}

pre code {
white-space: pre;
overflow: auto;
border-radius: 3px;
padding: 1px 1px;
display: block !important;
}

strong, b{
color: #BF360C;
}

em, i {
color: #009688;
}

hr {
border: 1px solid #BF360C;
margin: 1.5em auto;
}

p {
margin: 1.5em 5px !important;
}

table, pre, dl, blockquote, q, ul, ol {
margin: 10px 5px;
}

ul, ol {
padding-left: 15px;
}

li {
margin: 10px;
}

li p {
margin: 10px 0 !important;
}

ul ul, ul ol, ol ul, ol ol {
margin: 0;
padding-left: 10px;
}

ul {
list-style-type: circle;
}

dl {
padding: 0;
}

dl dt {
font-size: 1em;
font-weight: bold;
font-style: italic;
}

dl dd {
margin: 0 0 10px;
padding: 0 10px;
}

blockquote, q {
border-left: 2px solid #009688;
padding: 0 10px;
color: #777;
quotes: none;
margin-left: 1em;
}

blockquote::before, blockquote::after, q::before, q::after {
content: none;
}

h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-style: bold !important;
color: #009688 !important;
text-align: center !important;
margin: 1.5em 5px !important;
padding: 0.5em 1em !important;
}

h1 {
font-size: 24px !important;
}

h2 {
font-size: 20px !important;
}

h3 {
font-size: 18px;
}

h4 {
font-size: 16px;
}


table {
padding: 0;
border-collapse: collapse;
border-spacing: 0;
font-size: 1em;
font: inherit;
border: 0;
margin: 0 auto;
}

tbody {
margin: 0;
padding: 0;
border: 0;
}

table tr {
border: 0;
border-top: 1px solid #CCC;
background-color: white;
margin: 0;
padding: 0;
}

table tr:nth-child(2n) {
background-color: #F8F8F8;
}

table tr th, table tr td {
font-size: 16px;
border: 1px solid #CCC;
margin: 0;
padding: 5px 10px;
}

table tr th {
font-weight: bold;
color: #eee;
border: 1px solid #009688;
background-color: #009688;
}

复制完成后保存,重启Joplin即可。

问题及解决方法

当使用_macos theme_的插件主题之后,插件中的主题样式会覆盖部分的_自定义CSS样式_,可以通过在_自定义CSS样式_后添上!important强制使用自定义的样式。
对上文中的 CSS 进行更改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168


pre, code {
font-size: 14px !important;
font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace !important;
margin: auto 5px !important;
}

code {
white-space: pre-wrap !important;
border-radius: 2px !important;
display: inline !important;
}

pre {
font-size: 15px !important;
line-height: 1.4em !important;
display: block; !important;
}

pre code {
white-space: pre !important;
overflow: auto !important;
border-radius: 3px !important;
padding: 1px 1px !important;
display: block !important;
}

strong, b{
color: #BF360C !important;
}

em, i {
color: #009688 !important;
}

hr {
border: 1px solid #BF360C !important;
margin: 1.5em auto !important;
}

p {
margin: 1.5em 5px !important;
}

table, pre, dl, blockquote, q, ul, ol {
margin: 10px 5px !important;
}

ul, ol {
padding-left: 15px !important;
}

li {
margin: 10px !important;
}

li p {
margin: 10px 0 !important;
}

ul ul, ul ol, ol ul, ol ol {
margin: 0 !important;
padding-left: 10px !important;
}

ul {
list-style-type: circle !important;
}

dl {
padding: 0 !important;
}

dl dt {
font-size: 1em !important;
font-weight: bold !important;
font-style: italic !important;
}

dl dd {
margin: 0 0 10px !important;
padding: 0 10px !important;
}

blockquote, q {
border-left: 2px solid #009688 !important;
padding: 0 10px !important;
color: #777 !important;
quotes: none !important;
margin-left: 1em !important;
}

blockquote::before, blockquote::after, q::before, q::after {
content: none !important;
}

h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px !important;
padding: 0 !important;
font-style: bold !important;
color: #009688 !important;
text-align: center !important;
margin: 1.5em 5px !important;
padding: 0.5em 1em !important;
}

h1 {
font-size: 24px !important;
border-bottom: 1px solid #ddd !important;
}

h2 {
font-size: 20px !important;
border-bottom: 1px solid #eee !important;
}

h3 {
font-size: 18px !important;
}

h4 {
font-size: 16px !important;
}


table {
padding: 0 !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
font-size: 1em !important;
font: inherit !important;
border: 0 !important;
margin: 0 auto !important;
}

tbody {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}

table tr {
border: 0 !important;
border-top: 1px solid #CCC !important;
background-color: white !important;
margin: 0 !important;
padding: 0 !important;
}

table tr:nth-child(2n) {
background-color: #F8F8F8 !important;
}

table tr th, table tr td {
font-size: 16px !important;
border: 1px solid #CCC !important;
margin: 0 !important;
padding: 5px 10px !important;
}

table tr th {
font-weight: bold !important;
color: #eee !important;
border: 1px solid #009688 !important;
background-color: #009688 !important;
}

更改后发现自定义的CSS样式不再会被插件主题样式覆盖。