文字色块

效果演示

高亮文字

黄色色块 绿色色块 灰色色块

左边框红色块级

右边框红色块级

上边框蓝色块级

这里的背景色是：PowderBlue

实现方法

  1. MarkDown自带的文字高亮

    高亮文字

    用一个简单地mark标签即可实现，亮不亮，不够亮就看第3点

    1
    <mark>高亮文字</mark>

  2. 利用HTML表格标签的bgcolor属性来实现文字背景色（整行填充背景），写法如下，文末附有常用颜色表。

    这里的背景色是：PowderBlue
    1
    <table><tr><td bgcolor=PowderBlue>这里的背景色是：PowderBlue</td></tr></table>

  3. CSS样式里添加自定义颜色块，在文章中引用，

主题不同配置有所差异，例如NexT主题在blog\themes\next\source\css\_custom下添加以下内容，博主的Butterfly主题在blog\themes\Butterfly\source\css\_layout\post.styl下添加（不用在意符号，直接添加即可），各举一例，其余色块见文末。色块的所有配置传送点

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
// 颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:90%;
font-weight:normal;
line-height:1;
color:#000;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0.1rem;
background-color: #FFD700;
}
    
// 左侧边框红色块级
p#div-border-left-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #df3e3e;
}
// 左侧边框黄色块级
p#div-border-left-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #f0ad4e;
}

// 右侧边框黄色块级
p#div-border-right-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #f0ad4e;
}

// 上侧边框红色
p#div-border-top-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #df3e3e;
}

调用方法

文字色块利用span标签赋予样式，引用边框用p标签变色。当然编辑器里无法预览效果

黄色色块 绿色色块 灰色色块

左边框红色块级

右边框红色块级

上边框蓝色块级

1
2
3
4
5
6
7
8
9
<span id="inline-yellow">黄色色块</span>

<span id="inline-green">绿色色块</span>

<p id="div-border-left-red">左边框红色块级</p>

<p id="div-border-right-red">右边框红色块级</p>

<p id="div-border-top-blue">上边框蓝色块级</p>

标签外挂

效果演示

初级标签
Welcome to my personal homepage

Codeblock in note
成功标签

Info Header
信息标签

Warning Header
警告标签

Danger Header
危险标签

No icon note
note info no-icon
无图标标签

1
代码框标签

实现方法

这是主题自带的，相关配置你可以参考Note

主题_config中配置：

1
2
3
4
5
6
7
8
9
10
11
12
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: flat
  icons: true
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

调用方法

文章中引用代码如下，\{\% note \%\}与\{\% endnote \%\}之间可以包含文本内容、行内代码块、代码框，同一标签不用空行，所以相当于一行。(原来Markdown文章有大括号{和百分号%的地方不加反斜杠\都不行)

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

{% note primary %}
初级标签
**Welcome** to [my personal homepage](http://blog.xiabor.com)
{% endnote %}

{% note success %}
 Codeblock in note
成功标签
{% endnote %}

{% note info %}
 Info Header
信息标签
{% endnote %}

{% note warning %}
 Warning Header
警告标签
{% endnote %}

{% note danger %}
 Danger Header
危险标签
{% endnote %}

{% note info no-icon %}
 No icon note
 `note info no-icon`
无图标标签
{% endnote %}

{% code %}
代码框标签，效果和``` ```一样
{% endcode %}

文字上标下标

效果演示

X2    Y3    log39

实现方法

MarkDown的语法：

1
2
3
X<sup>2</sup>
Y<sub>3</sub>
log<sub>3</sub><sup>9</sup>

字体样式

效果演示

这是黑体字

这是微软雅黑

这是华文彩云

三号蓝色黑体

四号青色字

五号灰色字

实现方法

MarkDown嵌入HTML文字样式即可，字体名称及颜色代码可在文末找到

1
2
3
4
5
6
7
8
9
10
11
<font face="黑体">这是黑体字</font>

<font face="微软雅黑">这是微软雅黑</font>

<font face="STCAIYUN">这是华文彩云</font>

<font color=#0099ff size=3 face="黑体">三号蓝色黑体</font>

<font color=#00ffff size=4>四号青色字</font>

<font color=gray size=5>五号灰色字</font>

常用字体名称

中文字体：

黑体：SimHei

宋体：SimSun

新宋体：NSimSun

仿宋：FangSong

楷体：KaiTi

仿宋_GB2312：FangSong_GB2312

楷体_GB2312：KaiTi_GB2312

微软雅黑：Microsoft YaHei

英文字体：

PmingLiu

Impact

Georgia

Tahoma

Arial

Book Antiqua

Century Gothic

Courier New

Times New Roman

Verdana

其他字体

仿宋：FangSong

华文细黑：STHeiti Light [STXihei]

华文黑体：STHeiti

华文楷体：STKaiti

华文宋体：STSong

华文仿宋：STFangsong

隶书：LiSu

幼圆：YouYuan

华文细黑：STXihei

华文楷体：STKaiti

华文宋体：STSong

华文中宋：STZhongsong

华文仿宋：STFangsong

方正舒体：FZShuTi

方正姚体：FZYaoti

华文彩云：STCaiyun

华文琥珀：STHupo

华文隶书：STLiti

华文行楷：STXingkai

华文新魏：STXinwei

常用颜色代码

color=maroon
color=grey
color=silver
color=lightgrey
color=HotPink
color=DeepPink
color=VioletRed
color=Purple
color=navy
color=Blue
color=DeepSkyBlue
color=LightSkyBlue
color=aqua
color=DarkTurquoise
color=LightSeaGreen
color=YellowGreen
color=LawnGreen
color=GreenYellow
color=Yellow
color=Tomato
color=red
color=fuchsia
color=MediumOrchid
color=DarkViolet

颜色表

颜色名十六进制颜色值颜色
AliceBlue#F0F8FFrgb(240, 248, 255)
AntiqueWhite#FAEBD7rgb(250, 235, 215)
Aqua#00FFFFrgb(0, 255, 255)
Aquamarine#7FFFD4rgb(127, 255, 212)
Azure#F0FFFFrgb(240, 255, 255)
Beige#F5F5DCrgb(245, 245, 220)
Bisque#FFE4C4rgb(255, 228, 196)
Black#000000rgb(0, 0, 0)
BlanchedAlmond#FFEBCDrgb(255, 235, 205)
Blue#0000FFrgb(0, 0, 255)
BlueViolet#8A2BE2rgb(138, 43, 226)
Brown#A52A2Argb(165, 42, 42)
BurlyWood#DEB887rgb(222, 184, 135)
CadetBlue#5F9EA0rgb(95, 158, 160)
Chartreuse#7FFF00rgb(127, 255, 0)
Chocolate#D2691Ergb(210, 105, 30)
Coral#FF7F50rgb(255, 127, 80)
CornflowerBlue#6495EDrgb(100, 149, 237)
Cornsilk#FFF8DCrgb(255, 248, 220)
Crimson#DC143Crgb(220, 20, 60)
Cyan#00FFFFrgb(0, 255, 255)
DarkBlue#00008Brgb(0, 0, 139)
DarkCyan#008B8Brgb(0, 139, 139)
DarkGoldenRod#B8860Brgb(184, 134, 11)
DarkGray#A9A9A9rgb(169, 169, 169)
DarkGreen#006400rgb(0, 100, 0)
DarkKhaki#BDB76Brgb(189, 183, 107)
DarkMagenta#8B008Brgb(139, 0, 139)
DarkOliveGreen#556B2Frgb(85, 107, 47)
Darkorange#FF8C00rgb(255, 140, 0)
DarkOrchid#9932CCrgb(153, 50, 204)
DarkRed#8B0000rgb(139, 0, 0)
DarkSalmon#E9967Argb(233, 150, 122)
DarkSeaGreen#8FBC8Frgb(143, 188, 143)
DarkSlateBlue#483D8Brgb(72, 61, 139)
DarkSlateGray#2F4F4Frgb(47, 79, 79)
DarkTurquoise#00CED1rgb(0, 206, 209)
DarkViolet#9400D3rgb(148, 0, 211)
DeepPink#FF1493rgb(255, 20, 147)
DeepSkyBlue#00BFFFrgb(0, 191, 255)
DimGray#696969rgb(105, 105, 105)
DodgerBlue#1E90FFrgb(30, 144, 255)
Feldspar#D19275rgb(209, 146, 117)
FireBrick#B22222rgb(178, 34, 34)
FloralWhite#FFFAF0rgb(255, 250, 240)
ForestGreen#228B22rgb(34, 139, 34)
Fuchsia#FF00FFrgb(255, 0, 255)
Gainsboro#DCDCDCrgb(220, 220, 220)
GhostWhite#F8F8FFrgb(248, 248, 255)
Gold#FFD700rgb(255, 215, 0)
GoldenRod#DAA520rgb(218, 165, 32)
Gray#808080rgb(128, 128, 128)
Green#008000rgb(0, 128, 0)
GreenYellow#ADFF2Frgb(173, 255, 47)
HoneyDew#F0FFF0rgb(240, 255, 240)
HotPink#FF69B4rgb(255, 105, 180)
IndianRed#CD5C5Crgb(205, 92, 92)
Indigo#4B0082rgb(75, 0, 130)
Ivory#FFFFF0rgb(255, 255, 240)
Khaki#F0E68Crgb(240, 230, 140)
Lavender#E6E6FArgb(230, 230, 250)
LavenderBlush#FFF0F5rgb(255, 240, 245)
LawnGreen#7CFC00rgb(124, 252, 0)
LemonChiffon#FFFACDrgb(255, 250, 205)
LightBlue#ADD8E6rgb(173, 216, 230)
LightCoral#F08080rgb(240, 128, 128)
LightCyan#E0FFFFrgb(224, 255, 255)
LightGoldenRodYellow#FAFAD2rgb(250, 250, 210)
LightGrey#D3D3D3rgb(211, 211, 211)
LightGreen#90EE90rgb(144, 238, 144)
LightPink#FFB6C1rgb(255, 182, 193)
LightSalmon#FFA07Argb(255, 160, 122)
LightSeaGreen#20B2AArgb(32, 178, 170)
LightSkyBlue#87CEFArgb(135, 206, 250)
LightSlateBlue#8470FFrgb(132, 112, 255)
LightSlateGray#778899rgb(119, 136, 153)
LightSteelBlue#B0C4DErgb(176, 196, 222)
LightYellow#FFFFE0rgb(255, 255, 224)
Lime#00FF00rgb(0, 255, 0)
LimeGreen#32CD32rgb(50, 205, 50)
Linen#FAF0E6rgb(250, 240, 230)
Magenta#FF00FFrgb(255, 0, 255)
Maroon#800000rgb(128, 0, 0)
MediumAquaMarine#66CDAArgb(102, 205, 170)
MediumBlue#0000CDrgb(0, 0, 205)
MediumOrchid#BA55D3rgb(186, 85, 211)
MediumPurple#9370D8rgb(147, 112, 216)
MediumSeaGreen#3CB371rgb(60, 179, 113)
MediumSlateBlue#7B68EErgb(123, 104, 238)
MediumSpringGreen#00FA9Argb(0, 250, 154)
MediumTurquoise#48D1CCrgb(72, 209, 204)
MediumVioletRed#C71585rgb(199, 21, 133)
MidnightBlue#191970rgb(25, 25, 112)
MintCream#F5FFFArgb(245, 255, 250)
MistyRose#FFE4E1rgb(255, 228, 225)
Moccasin#FFE4B5rgb(255, 228, 181)
NavajoWhite#FFDEADrgb(255, 222, 173)
Navy#000080rgb(0, 0, 128)
OldLace#FDF5E6rgb(253, 245, 230)
Olive#808000rgb(128, 128, 0)
OliveDrab#6B8E23rgb(107, 142, 35)
Orange#FFA500rgb(255, 165, 0)
OrangeRed#FF4500rgb(255, 69, 0)
Orchid#DA70D6rgb(218, 112, 214)
PaleGoldenRod#EEE8AArgb(238, 232, 170)
PaleGreen#98FB98rgb(152, 251, 152)
PaleTurquoise#AFEEEErgb(175, 238, 238)
PaleVioletRed#D87093rgb(216, 112, 147)
PapayaWhip#FFEFD5rgb(255, 239, 213)
PeachPuff#FFDAB9rgb(255, 218, 185)
Peru#CD853Frgb(205, 133, 63)
Pink#FFC0CBrgb(255, 192, 203)
Plum#DDA0DDrgb(221, 160, 221)
PowderBlue#B0E0E6rgb(176, 224, 230)
Purple#800080rgb(128, 0, 128)
Red#FF0000rgb(255, 0, 0)
RosyBrown#BC8F8Frgb(188, 143, 143)
RoyalBlue#4169E1rgb(65, 105, 225)
SaddleBrown#8B4513rgb(139, 69, 19)
Salmon#FA8072rgb(250, 128, 114)
SandyBrown#F4A460rgb(244, 164, 96)
SeaGreen#2E8B57rgb(46, 139, 87)
SeaShell#FFF5EErgb(255, 245, 238)
Sienna#A0522Drgb(160, 82, 45)
Silver#C0C0C0rgb(192, 192, 192)
SkyBlue#87CEEBrgb(135, 206, 235)
SlateBlue#6A5ACDrgb(106, 90, 205)
SlateGray#708090rgb(112, 128, 144)
Snow#FFFAFArgb(255, 250, 250)
SpringGreen#00FF7Frgb(0, 255, 127)
SteelBlue#4682B4rgb(70, 130, 180)
Tan#D2B48Crgb(210, 180, 140)
Teal#008080rgb(0, 128, 128)
Thistle#D8BFD8rgb(216, 191, 216)
Tomato#FF6347rgb(255, 99, 71)
Turquoise#40E0D0rgb(64, 224, 208)
Violet#EE82EErgb(238, 130, 238)
VioletRed#D02090rgb(208, 32, 144)
Wheat#F5DEB3rgb(245, 222, 179)
White#FFFFFFrgb(255, 255, 255)
WhiteSmoke#F5F5F5rgb(245, 245, 245)
Yellow#FFFF00rgb(255, 255, 0)
YellowGreen#9ACD32rgb(154, 205, 50)

颜色块配置

抵达传送点

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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
// 颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:90%;
font-weight:normal;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0.1rem;
background-color: #FFD700;
}

// 颜色块-绿
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:90%;
font-weight:normal;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0.1rem;
background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:90%;
font-weight:normal;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0.1rem;
background-color: #2780e3;
}
// 颜色块-灰
span#inline-grey {
display:inline;
padding:.2em .6em .3em;
font-size:90%;
font-weight:normal;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0.1rem;
background-color: #4F4F4F;
}
// 颜色块-红
span#inline-red {
display:inline;
padding:.2em .6em .3em;
font-size:90%;
font-weight:normal;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0.1rem;
background-color: #FF3030;
}
// 颜色块-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:90%;
font-weight:normal;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0.1rem;
background-color: #9954bb;
}
// 左侧边框红色块级
p#div-border-left-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #df3e3e;
}
// 左侧边框黄色块级
p#div-border-left-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #f0ad4e;
}
// 左侧边框绿色块级
p#div-border-left-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #5cb85c;
}
// 左侧边框灰色块级
p#div-border-left-grey {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #4F4F4F;
}
// 左侧边框蓝色块级
p#div-border-left-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #2780e3;
}
// 左侧边框紫色块级
p#div-border-left-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #9954bb;
}
// 右侧边框红色块级
p#div-border-right-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #df3e3e;
}
// 右侧边框黄色块级
p#div-border-right-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #f0ad4e;
}
// 右侧边框绿色块级
p#div-border-right-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #5cb85c;
}
// 右侧边框蓝色块级
p#div-border-right-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #2780e3;
}
// 右侧边框紫色块级
p#div-border-right-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #9954bb;
}
// 上侧边框红色
p#div-border-top-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #df3e3e;
}
// 上侧边框黄色
p#div-border-top-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #f0ad4e;
}
// 上侧边框绿色
p#div-border-top-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #5cb85c;
}
// 上侧边框蓝色
p#div-border-top-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #2780e3;
}
// 上侧边框紫色
p#div-border-top-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #9954bb;
}

参考来源：