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

推荐订阅源

N
News and Events Feed by Topic
V
V2EX
博客园 - 【当耐特】
Vercel News
Vercel News
雷峰网
雷峰网
爱范儿
爱范儿
WordPress大学
WordPress大学
云风的 BLOG
云风的 BLOG
S
Securelist
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Microsoft Azure Blog
Microsoft Azure Blog
F
Full Disclosure
有赞技术团队
有赞技术团队
Hugging Face - Blog
Hugging Face - Blog
NISL@THU
NISL@THU
www.infosecurity-magazine.com
www.infosecurity-magazine.com
Attack and Defense Labs
Attack and Defense Labs
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Hacker News - Newest:
Hacker News - Newest: "LLM"
Microsoft Security Blog
Microsoft Security Blog
腾讯CDC
P
Proofpoint News Feed
B
Blog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
K
Kaspersky official blog
I
InfoQ
Google Online Security Blog
Google Online Security Blog
L
LINUX DO - 最新话题
Project Zero
Project Zero
Engineering at Meta
Engineering at Meta
V
Visual Studio Blog
AI
AI
Schneier on Security
Schneier on Security
B
Blog RSS Feed
T
Tor Project blog
H
Help Net Security
H
Hackread – Cybersecurity News, Data Breaches, AI and More
L
LINUX DO - 热门话题
阮一峰的网络日志
阮一峰的网络日志
S
Security @ Cisco Blogs
T
Threat Research - Cisco Blogs
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
C
Cyber Attacks, Cyber Crime and Cyber Security
G
Google Developers Blog
Google DeepMind News
Google DeepMind News
V2EX - 技术
V2EX - 技术
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
A
Arctic Wolf
Webroot Blog
Webroot Blog
Recent Commits to openclaw:main
Recent Commits to openclaw:main

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样式不再会被插件主题样式覆盖。