Skip to content

Commit 8846b01

Browse files
leaf-hsiaoleaf-hsiao
committed
Fixed some bugs, add README.md
1 parent 0dad50b commit 8846b01

File tree

7 files changed

+197
-69
lines changed

7 files changed

+197
-69
lines changed

‎README.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
> Designed and tested on Windows 10, version 1703. Not fully tested, but should work for macOS/Linux.
2+
3+
# Catfish
4+
5+
This theme provides a comfortable display of CJK characters by using [source-han-sans](https://github.com/adobe-fonts/source-han-sans) and [source-han-serif](https://github.com/adobe-fonts/source-han-serif).
6+
7+
Code Fence uses theme ported from [material.css](https://codemirror.net/theme/material.css).
8+
9+
无衬线字体，衬线字体和等宽字体分别采用思源黑体，思源宋体， mononoki ，在 Windows 下有良好的中文呈现效果。
10+
11+
代码高亮使用 Material 配色。
12+
13+
_screenshots:_
14+
15+
![](images/catfish1.png)
16+
17+
![](images/catfish2.png)
18+
19+
![](images/catfish3.png)

‎catfish.css

Lines changed: 89 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -163,47 +163,103 @@ tt {
163163
164164
*/
165165

166-
.cm-s-inner,.cm-s-typora-default {
166+
.cm-s-inner {
167167
background-color: #263238;
168168
color: rgba(233, 237, 237, 1);
169169
}
170-
.cm-s-inner,.cm-s-typora-default .CodeMirror-gutters {
170+
.cm-s-inner .CodeMirror-gutters {
171171
background: #263238;
172172
color: rgb(83,127,126);
173173
border: none;
174174
}
175-
.cm-s-inner,.cm-s-typora-default .CodeMirror-guttermarker, .cm-s-inner,.cm-s-typora-default .CodeMirror-guttermarker-subtle, .cm-s-inner,.cm-s-typora-default .CodeMirror-linenumber { color: rgb(83,127,126); }
176-
.cm-s-inner,.cm-s-typora-default .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
177-
.cm-s-inner,.cm-s-typora-default div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
178-
.cm-s-inner,.cm-s-typora-default.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
179-
.cm-s-inner,.cm-s-typora-default .CodeMirror-line::selection, .cm-s-inner,.cm-s-typora-default .CodeMirror-line > span::selection, .cm-s-inner,.cm-s-typora-default .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
180-
.cm-s-inner,.cm-s-typora-default .CodeMirror-line::-moz-selection, .cm-s-inner,.cm-s-typora-default .CodeMirror-line > span::-moz-selection, .cm-s-inner,.cm-s-typora-default .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
175+
.cm-s-inner .CodeMirror-guttermarker, .cm-s-inner .CodeMirror-guttermarker-subtle, .cm-s-inner .CodeMirror-linenumber { color: rgb(83,127,126); }
176+
.cm-s-inner .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
177+
.cm-s-inner div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
178+
.cm-s-inner.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
179+
.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); }
180+
.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); }
181181

182-
.cm-s-inner,.cm-s-typora-default .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
183-
.cm-s-inner,.cm-s-typora-default .cm-keyword { color: rgba(199, 146, 234, 1); }
184-
.cm-s-inner,.cm-s-typora-default .cm-operator { color: rgba(233, 237, 237, 1); }
185-
.cm-s-inner,.cm-s-typora-default .cm-variable-2 { color: #80CBC4; }
186-
.cm-s-inner,.cm-s-typora-default .cm-variable-3 { color: #82B1FF; }
187-
.cm-s-inner,.cm-s-typora-default .cm-builtin { color: #DECB6B; }
188-
.cm-s-inner,.cm-s-typora-default .cm-atom { color: #F77669; }
189-
.cm-s-inner,.cm-s-typora-default .cm-number { color: #F77669; }
190-
.cm-s-inner,.cm-s-typora-default .cm-def { color: rgba(233, 237, 237, 1); }
191-
.cm-s-inner,.cm-s-typora-default .cm-string { color: #C3E88D; }
192-
.cm-s-inner,.cm-s-typora-default .cm-string-2 { color: #80CBC4; }
193-
.cm-s-inner,.cm-s-typora-default .cm-comment { color: #546E7A; }
194-
.cm-s-inner,.cm-s-typora-default .cm-variable { color: #82B1FF; }
195-
.cm-s-inner,.cm-s-typora-default .cm-tag { color: #80CBC4; }
196-
.cm-s-inner,.cm-s-typora-default .cm-meta { color: #80CBC4; }
197-
.cm-s-inner,.cm-s-typora-default .cm-attribute { color: #FFCB6B; }
198-
.cm-s-inner,.cm-s-typora-default .cm-property { color: #80CBAE; }
199-
.cm-s-inner,.cm-s-typora-default .cm-qualifier { color: #DECB6B; }
200-
.cm-s-inner,.cm-s-typora-default .cm-variable-3 { color: #DECB6B; }
201-
.cm-s-inner,.cm-s-typora-default .cm-tag { color: rgba(255, 83, 112, 1); }
202-
.cm-s-inner,.cm-s-typora-default .cm-error {
182+
.cm-s-inner .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
183+
.cm-s-inner .cm-keyword { color: rgba(199, 146, 234, 1); }
184+
.cm-s-inner .cm-operator { color: rgba(233, 237, 237, 1); }
185+
.cm-s-inner .cm-variable-2 { color: #80CBC4; }
186+
.cm-s-inner .cm-variable-3 { color: #82B1FF; }
187+
.cm-s-inner .cm-builtin { color: #DECB6B; }
188+
.cm-s-inner .cm-atom { color: #F77669; }
189+
.cm-s-inner .cm-number { color: #F77669; }
190+
.cm-s-inner .cm-def { color: rgba(233, 237, 237, 1); }
191+
.cm-s-inner .cm-string { color: #C3E88D; }
192+
.cm-s-inner .cm-string-2 { color: #80CBC4; }
193+
.cm-s-inner .cm-comment { color: #546E7A; }
194+
.cm-s-inner .cm-variable { color: #82B1FF; }
195+
.cm-s-inner .cm-tag { color: #80CBC4; }
196+
.cm-s-inner .cm-meta { color: #80CBC4; }
197+
.cm-s-inner .cm-attribute { color: #FFCB6B; }
198+
.cm-s-inner .cm-property { color: #80CBAE; }
199+
.cm-s-inner .cm-qualifier { color: #DECB6B; }
200+
.cm-s-inner .cm-variable-3 { color: #DECB6B; }
201+
.cm-s-inner .cm-tag { color: rgba(255, 83, 112, 1); }
202+
.cm-s-inner .cm-error {
203203
color: rgba(255, 255, 255, 1.0);
204204
background-color: #EC5F67;
205205
}
206-
.cm-s-inner,.cm-s-typora-default .CodeMirror-matchingbracket {
206+
.cm-s-inner .CodeMirror-matchingbracket {
207+
text-decoration: underline;
208+
color: white !important;
209+
}
210+
211+
/**apply to code fences with plan text**/
212+
.md-fences {
213+
background-color: #263238;
214+
color: rgba(233, 237, 237, 1);
215+
border: none;
216+
}
217+
218+
.md-fences .code-tooltip {
219+
background-color: #263238;
220+
}
221+
222+
.cm-s-typora-default {
223+
background-color: #263238;
224+
color: rgba(233, 237, 237, 1);
225+
}
226+
.cm-s-typora-default .CodeMirror-gutters {
227+
background: #263238;
228+
color: rgb(83,127,126);
229+
border: none;
230+
}
231+
.cm-s-typora-default .CodeMirror-guttermarker, .cm-s-typora-default .CodeMirror-guttermarker-subtle, .cm-s-typora-default .CodeMirror-linenumber { color: rgb(83,127,126); }
232+
.cm-s-typora-default .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
233+
.cm-s-typora-default div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
234+
.cm-s-typora-default.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
235+
.cm-s-typora-default .CodeMirror-line::selection, .cm-s-typora-default .CodeMirror-line > span::selection, .cm-s-typora-default .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
236+
.cm-s-typora-default .CodeMirror-line::-moz-selection, .cm-s-typora-default .CodeMirror-line > span::-moz-selection, .cm-s-typora-default .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
237+
238+
.cm-s-typora-default .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
239+
.cm-s-typora-default .cm-keyword { color: rgba(199, 146, 234, 1); }
240+
.cm-s-typora-default .cm-operator { color: rgba(233, 237, 237, 1); }
241+
.cm-s-typora-default .cm-variable-2 { color: #80CBC4; }
242+
.cm-s-typora-default .cm-variable-3 { color: #82B1FF; }
243+
.cm-s-typora-default .cm-builtin { color: #DECB6B; }
244+
.cm-s-typora-default .cm-atom { color: #F77669; }
245+
.cm-s-typora-default .cm-number { color: #F77669; }
246+
.cm-s-typora-default .cm-def { color: rgba(233, 237, 237, 1); }
247+
.cm-s-typora-default .cm-string { color: #C3E88D; }
248+
.cm-s-typora-default .cm-string-2 { color: #80CBC4; }
249+
.cm-s-typora-default .cm-comment { color: #546E7A; }
250+
.cm-s-typora-default .cm-variable { color: #82B1FF; }
251+
.cm-s-typora-default .cm-tag { color: #80CBC4; }
252+
.cm-s-typora-default .cm-meta { color: #80CBC4; }
253+
.cm-s-typora-default .cm-attribute { color: #FFCB6B; }
254+
.cm-s-typora-default .cm-property { color: #80CBAE; }
255+
.cm-s-typora-default .cm-qualifier { color: #DECB6B; }
256+
.cm-s-typora-default .cm-variable-3 { color: #DECB6B; }
257+
.cm-s-typora-default .cm-tag { color: rgba(255, 83, 112, 1); }
258+
.cm-s-typora-default .cm-error {
259+
color: rgba(255, 255, 255, 1.0);
260+
background-color: #EC5F67;
261+
}
262+
.cm-s-typora-default .CodeMirror-matchingbracket {
207263
text-decoration: underline;
208264
color: white !important;
209265
}
@@ -221,10 +277,9 @@ tt {
221277

222278
#write pre.md-meta-block {
223279
padding: 1em;
224-
background-color: #f7f7f7;
225-
border: 0;
226-
border-radius: 3px;
227-
color: #777777;
280+
background-color: #fff;
281+
border-bottom: 1px dashed #ddd;
282+
color: #80cbc4;
228283
margin-top: 0 !important;
229284
}
230285
.md-image>.md-meta {

‎catfish.styl

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -166,14 +166,12 @@ blockquote blockquote
166166
@import "catfish/material"
167167

168168
//YAML front matters
169-
//based on github.css
170169
@css{
171170
#write pre.md-meta-block {
172171
padding: 1em;
173-
background-color: #f7f7f7;
174-
border: 0;
175-
border-radius: 3px;
176-
color: #777777;
172+
background-color: #fff;
173+
border-bottom: 1px dashed #ddd;
174+
color: #80cbc4;
177175
margin-top: 0 !important;
178176
}
179177
}

‎catfish/material.styl

Lines changed: 86 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,47 +9,103 @@
99
1010
*/
1111

12-
.cm-s-inner,.cm-s-typora-default {
12+
.cm-s-inner {
1313
background-color: #263238;
1414
color: rgba(233, 237, 237, 1);
1515
}
16-
.cm-s-inner,.cm-s-typora-default .CodeMirror-gutters {
16+
.cm-s-inner .CodeMirror-gutters {
1717
background: #263238;
1818
color: rgb(83,127,126);
1919
border: none;
2020
}
21-
.cm-s-inner,.cm-s-typora-default .CodeMirror-guttermarker, .cm-s-inner,.cm-s-typora-default .CodeMirror-guttermarker-subtle, .cm-s-inner,.cm-s-typora-default .CodeMirror-linenumber { color: rgb(83,127,126); }
22-
.cm-s-inner,.cm-s-typora-default .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
23-
.cm-s-inner,.cm-s-typora-default div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
24-
.cm-s-inner,.cm-s-typora-default.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
25-
.cm-s-inner,.cm-s-typora-default .CodeMirror-line::selection, .cm-s-inner,.cm-s-typora-default .CodeMirror-line > span::selection, .cm-s-inner,.cm-s-typora-default .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
26-
.cm-s-inner,.cm-s-typora-default .CodeMirror-line::-moz-selection, .cm-s-inner,.cm-s-typora-default .CodeMirror-line > span::-moz-selection, .cm-s-inner,.cm-s-typora-default .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
21+
.cm-s-inner .CodeMirror-guttermarker, .cm-s-inner .CodeMirror-guttermarker-subtle, .cm-s-inner .CodeMirror-linenumber { color: rgb(83,127,126); }
22+
.cm-s-inner .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
23+
.cm-s-inner div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
24+
.cm-s-inner.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
25+
.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); }
26+
.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); }
2727

28-
.cm-s-inner,.cm-s-typora-default .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
29-
.cm-s-inner,.cm-s-typora-default .cm-keyword { color: rgba(199, 146, 234, 1); }
30-
.cm-s-inner,.cm-s-typora-default .cm-operator { color: rgba(233, 237, 237, 1); }
31-
.cm-s-inner,.cm-s-typora-default .cm-variable-2 { color: #80CBC4; }
32-
.cm-s-inner,.cm-s-typora-default .cm-variable-3 { color: #82B1FF; }
33-
.cm-s-inner,.cm-s-typora-default .cm-builtin { color: #DECB6B; }
34-
.cm-s-inner,.cm-s-typora-default .cm-atom { color: #F77669; }
35-
.cm-s-inner,.cm-s-typora-default .cm-number { color: #F77669; }
36-
.cm-s-inner,.cm-s-typora-default .cm-def { color: rgba(233, 237, 237, 1); }
37-
.cm-s-inner,.cm-s-typora-default .cm-string { color: #C3E88D; }
38-
.cm-s-inner,.cm-s-typora-default .cm-string-2 { color: #80CBC4; }
39-
.cm-s-inner,.cm-s-typora-default .cm-comment { color: #546E7A; }
40-
.cm-s-inner,.cm-s-typora-default .cm-variable { color: #82B1FF; }
41-
.cm-s-inner,.cm-s-typora-default .cm-tag { color: #80CBC4; }
42-
.cm-s-inner,.cm-s-typora-default .cm-meta { color: #80CBC4; }
43-
.cm-s-inner,.cm-s-typora-default .cm-attribute { color: #FFCB6B; }
44-
.cm-s-inner,.cm-s-typora-default .cm-property { color: #80CBAE; }
45-
.cm-s-inner,.cm-s-typora-default .cm-qualifier { color: #DECB6B; }
46-
.cm-s-inner,.cm-s-typora-default .cm-variable-3 { color: #DECB6B; }
47-
.cm-s-inner,.cm-s-typora-default .cm-tag { color: rgba(255, 83, 112, 1); }
48-
.cm-s-inner,.cm-s-typora-default .cm-error {
28+
.cm-s-inner .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
29+
.cm-s-inner .cm-keyword { color: rgba(199, 146, 234, 1); }
30+
.cm-s-inner .cm-operator { color: rgba(233, 237, 237, 1); }
31+
.cm-s-inner .cm-variable-2 { color: #80CBC4; }
32+
.cm-s-inner .cm-variable-3 { color: #82B1FF; }
33+
.cm-s-inner .cm-builtin { color: #DECB6B; }
34+
.cm-s-inner .cm-atom { color: #F77669; }
35+
.cm-s-inner .cm-number { color: #F77669; }
36+
.cm-s-inner .cm-def { color: rgba(233, 237, 237, 1); }
37+
.cm-s-inner .cm-string { color: #C3E88D; }
38+
.cm-s-inner .cm-string-2 { color: #80CBC4; }
39+
.cm-s-inner .cm-comment { color: #546E7A; }
40+
.cm-s-inner .cm-variable { color: #82B1FF; }
41+
.cm-s-inner .cm-tag { color: #80CBC4; }
42+
.cm-s-inner .cm-meta { color: #80CBC4; }
43+
.cm-s-inner .cm-attribute { color: #FFCB6B; }
44+
.cm-s-inner .cm-property { color: #80CBAE; }
45+
.cm-s-inner .cm-qualifier { color: #DECB6B; }
46+
.cm-s-inner .cm-variable-3 { color: #DECB6B; }
47+
.cm-s-inner .cm-tag { color: rgba(255, 83, 112, 1); }
48+
.cm-s-inner .cm-error {
4949
color: rgba(255, 255, 255, 1.0);
5050
background-color: #EC5F67;
5151
}
52-
.cm-s-inner,.cm-s-typora-default .CodeMirror-matchingbracket {
52+
.cm-s-inner .CodeMirror-matchingbracket {
53+
text-decoration: underline;
54+
color: white !important;
55+
}
56+
57+
/**apply to code fences with plan text**/
58+
.md-fences {
59+
background-color: #263238;
60+
color: rgba(233, 237, 237, 1);
61+
border: none;
62+
}
63+
64+
.md-fences .code-tooltip {
65+
background-color: #263238;
66+
}
67+
68+
.cm-s-typora-default {
69+
background-color: #263238;
70+
color: rgba(233, 237, 237, 1);
71+
}
72+
.cm-s-typora-default .CodeMirror-gutters {
73+
background: #263238;
74+
color: rgb(83,127,126);
75+
border: none;
76+
}
77+
.cm-s-typora-default .CodeMirror-guttermarker, .cm-s-typora-default .CodeMirror-guttermarker-subtle, .cm-s-typora-default .CodeMirror-linenumber { color: rgb(83,127,126); }
78+
.cm-s-typora-default .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
79+
.cm-s-typora-default div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
80+
.cm-s-typora-default.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
81+
.cm-s-typora-default .CodeMirror-line::selection, .cm-s-typora-default .CodeMirror-line > span::selection, .cm-s-typora-default .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
82+
.cm-s-typora-default .CodeMirror-line::-moz-selection, .cm-s-typora-default .CodeMirror-line > span::-moz-selection, .cm-s-typora-default .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
83+
84+
.cm-s-typora-default .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
85+
.cm-s-typora-default .cm-keyword { color: rgba(199, 146, 234, 1); }
86+
.cm-s-typora-default .cm-operator { color: rgba(233, 237, 237, 1); }
87+
.cm-s-typora-default .cm-variable-2 { color: #80CBC4; }
88+
.cm-s-typora-default .cm-variable-3 { color: #82B1FF; }
89+
.cm-s-typora-default .cm-builtin { color: #DECB6B; }
90+
.cm-s-typora-default .cm-atom { color: #F77669; }
91+
.cm-s-typora-default .cm-number { color: #F77669; }
92+
.cm-s-typora-default .cm-def { color: rgba(233, 237, 237, 1); }
93+
.cm-s-typora-default .cm-string { color: #C3E88D; }
94+
.cm-s-typora-default .cm-string-2 { color: #80CBC4; }
95+
.cm-s-typora-default .cm-comment { color: #546E7A; }
96+
.cm-s-typora-default .cm-variable { color: #82B1FF; }
97+
.cm-s-typora-default .cm-tag { color: #80CBC4; }
98+
.cm-s-typora-default .cm-meta { color: #80CBC4; }
99+
.cm-s-typora-default .cm-attribute { color: #FFCB6B; }
100+
.cm-s-typora-default .cm-property { color: #80CBAE; }
101+
.cm-s-typora-default .cm-qualifier { color: #DECB6B; }
102+
.cm-s-typora-default .cm-variable-3 { color: #DECB6B; }
103+
.cm-s-typora-default .cm-tag { color: rgba(255, 83, 112, 1); }
104+
.cm-s-typora-default .cm-error {
105+
color: rgba(255, 255, 255, 1.0);
106+
background-color: #EC5F67;
107+
}
108+
.cm-s-typora-default .CodeMirror-matchingbracket {
53109
text-decoration: underline;
54110
color: white !important;
55111
}

‎images/catfish1.png

90.9 KB
Loading

‎images/catfish2.png

68.2 KB
Loading

‎images/catfish3.png

438 KB
Loading

0 commit comments

Comments
 (0)