markdown的文章样式：字体、颜色、大小、背景色、图片、缩进

最新推荐文章于 2024-05-27 14:08:51 发布

jinggod

最新推荐文章于 2024-05-27 14:08:51 发布

阅读量1.1w

点赞数 17

分类专栏：博客文章标签： markdown 字体图片博客颜色

本文链接：https://blog.csdn.net/jinggod/article/details/78241901

版权

博客专栏收录该内容

2 篇文章 0 订阅

订阅专栏

自从我学习编程开始，我是一直在用CSDN，但是一直在看大神的博客，这几天才开始写博客，CSDN提供两种编辑方式来写文章。第一种便是xhEditor ；第二种便是markdown。第一种写文章的方式low爆了，作为程序员的我肯定要选一些能够装一下逼的方式。而且，markdown确实是用起来更好用。但也遇到不少的问题，如：给字体换个字体类型，大小，颜色、缩进等基本的文章样式，markdown的基本语法根本做不到。
不过幸运的是，markdown的基本语法虽然不支持这些样式，但markdown支持HTML的语法，这就意味着markdown能够借助HTML实现功能扩展。就在我满怀心喜要使用使用我的前端知识来写出一篇样式绚丽的文章时，又发现markdown不支持HTML的style属性，这就意味着几乎所有样式是无法实现了。在我阅读了一些博文和不断尝试后，终于是可以实现基本需求的样式了。

1、缩进和空格
这里的缩进还是得通过空格来实现缩进的，效果就是我这文章的段落首行缩进

&emsp;&emsp;不过幸运的是,....

&ensp; ：输入一个空格
  ：输入一个空格
&emsp; ：输入两个空格

注意：别忘了分号

2、居中
2.1、方式一： <center>内容</center>
2.2、方式二： <div align=center> 内容 </div>

3、字体颜色、大小、字体类型
使用font标签以及其三个属性，下面代码的效果便是第3个标题

<font color="#0099ff" size=6 face="微软雅黑">3、字体颜色、大小、字体类型</font>

size：可能的值：从 1 到 7 的数字。浏览器默认值是 3。

4、图片
这里通过width、height控制图片的大小

<img src="http://ww2.sinaimg.cn/bmiddle/88070423gw1ep30aw8an7g204d04gkgd.gif" width="400" height="400" alt=" 图片不见了。。。 "/>

图片不见了。。。

alt:是图片没有加载成功时，显示的文字

5、背景色
html的标签中暂时发现只有两个标签有 bgcolor 的属性（这个属性可以设置背景色）：<body>、<td>。
经验证，<body>标签是不行的，而且这样写也不合理，所以就只有<td>标签了;

<table><tr><td bgcolor="red">红色背景</td></tr></table>

效果：

红色背景

6、空白行
虽然说markdown能回车换行，但是没办法做到n个空白行，而且。换行的办法就比较多了，因为别忘了，markdown是支持HTML标签的：
1. 使用块标签，撑开一行，如p、div

<p></p>
或
<div></div>

简单点的方法，就直接使用 br 标签

内容1<br/><br/>内容2

效果：
内容1

内容2

7、文章内容的定位
有时候我们在写文章时，想提供读者一个参考。这里使用的便是a标签的锚点定位，既可以跳到本页的某一处，也可以定位到另一个网页的某一处：
1. 在目标处设置一个id；
2. 使用a标签，属性 href =”URL#id”
3. 使用markdown的语法：[文字](#id)

<!-- 这里的ID就是aaa ，截取自本文章的首行-->
<span id="aaa">自从我学习编程开始</span >
<!-- 注意：不添加URL地址，表示跳转到本页的某处。-->
<a href="#aaa">本文的首行</a>
[本文的首行](#aaa)

效果：
本文的首行

最后附上颜色表，可以开始你的表演了。本文底部 ⇓，欢迎讨论

颜色表

颜色名	中文名称	Hex RGB	十进制 Decimal
LightPink	浅粉红	#FFB6C1	255,182,193
Pink	粉红	#FFC0CB	255,192,203
Crimson	深红(猩红)	#DC143C	220,20,60
LavenderBlush	淡紫红	#FFF0F5	255,240,245
PaleVioletRed	弱紫罗兰红	#DB7093	219,112,147
HotPink	热情的粉红	#FF69B4	255,105,180
DeepPink	深粉红	#FF1493	255,20,147
MediumVioletRed	中紫罗兰红	#C71585	199,21,133
Orchid	暗紫色(兰花紫)	#DA70D6	218,112,214
Thistle	蓟色	#D8BFD8	216,191,216
Plum	洋李色(李子紫)	#DDA0DD	221,160,221
Violet	紫罗兰	#EE82EE	238,130,238
Magenta	洋红(玫瑰红)	#FF00FF	255,0,255
Fuchsia	紫红(灯笼海棠)	#FF00FF	255,0,255
DarkMagenta	深洋红	#8B008B	139,0,139
Purple	紫色	#800080	128,0,128
MediumOrchid	中兰花紫	#BA55D3	186,85,211
DarkViolet	暗紫罗兰	#9400D3	148,0,211
DarkOrchid	暗兰花紫	#9932CC	153,50,204
Indigo	靛青/紫兰色	#4B0082	75,0,130
BlueViolet	蓝紫罗兰	#8A2BE2	138,43,226
MediumPurple	中紫色	#9370DB	147,112,219
MediumSlateBlue	中暗蓝色(中板岩蓝)	#7B68EE	123,104,238
SlateBlue	石蓝色(板岩蓝)	#6A5ACD	106,90,205
DarkSlateBlue	暗灰蓝色(暗板岩蓝)	#483D8B	72,61,139
Lavender	淡紫色(熏衣草淡紫)	#E6E6FA	230,230,250
GhostWhite	幽灵白	#F8F8FF	248,248,255
Blue	纯蓝	#0000FF	0,0,255
MediumBlue	中蓝色	#0000CD	0,0,205
MidnightBlue	午夜蓝	#191970	25,25,112
DarkBlue	暗蓝色	#00008B	0,0,139
Navy	海军蓝	#000080	0,0,128
RoyalBlue	皇家蓝/宝蓝	#4169E1	65,105,225
CornflowerBlue	矢车菊蓝	#6495ED	100,149,237
LightSteelBlue	亮钢蓝	#B0C4DE	176,196,222
LightSlateGray	亮蓝灰(亮石板灰)	#778899	119,136,153
SlateGray	灰石色(石板灰)	#708090	112,128,144
DodgerBlue	闪兰色(道奇蓝)	#1E90FF	30,144,255
AliceBlue	爱丽丝蓝	#F0F8FF	240,248,255
SteelBlue	钢蓝/铁青	#4682B4	70,130,180
LightSkyBlue	亮天蓝色	#87CEFA	135,206,250
SkyBlue	天蓝色	#87CEEB	135,206,235
DeepSkyBlue	深天蓝	#00BFFF	0,191,255
LightBlue	亮蓝	#ADD8E6	173,216,230
PowderBlue	粉蓝色(火药青)	#B0E0E6	176,224,230
CadetBlue	军兰色(军服蓝)	#5F9EA0	95,158,160
Azure	蔚蓝色	#F0FFFF	240,255,255
LightCyan	淡青色	#E0FFFF	224,255,255
PaleTurquoise	弱绿宝石	#AFEEEE	175,238,238
Cyan	青色	#00FFFF	0,255,255
Aqua	浅绿色(水色)	#00FFFF	0,255,255
DarkTurquoise	暗绿宝石	#00CED1	0,206,209
DarkSlateGray	暗瓦灰色(暗石板灰)	#2F4F4F	47,79,79
DarkCyan	暗青色	#008B8B	0,139,139
Teal	水鸭色	#008080	0,128,128
MediumTurquoise	中绿宝石	#48D1CC	72,209,204
LightSeaGreen	浅海洋绿	#20B2AA	32,178,170
Turquoise	绿宝石	#40E0D0	64,224,208
Aquamarine	宝石碧绿	#7FFFD4	127,255,212
MediumAquamarine	中宝石碧绿	#66CDAA	102,205,170
MediumSpringGreen	中春绿色	#00FA9A	0,250,154
MintCream	薄荷奶油	#F5FFFA	245,255,250
SpringGreen	春绿色	#00FF7F	0,255,127
MediumSeaGreen	中海洋绿	#3CB371	60,179,113
SeaGreen	海洋绿	#2E8B57	46,139,87
Honeydew	蜜色(蜜瓜色)	#F0FFF0	240,255,240
LightGreen	淡绿色	#90EE90	144,238,144
PaleGreen	弱绿色	#98FB98	152,251,152
DarkSeaGreen	暗海洋绿	#8FBC8F	143,188,143
LimeGreen	闪光深绿	#32CD32	50,205,50
Lime	闪光绿	#00FF00	0,255,0
ForestGreen	森林绿	#228B22	34,139,34
Green	纯绿	#008000	0,128,0
DarkGreen	暗绿色	#006400	0,100,0
Chartreuse	黄绿色(查特酒绿)	#7FFF00	127,255,0
LawnGreen	草绿色(草坪绿_	#7CFC00	124,252,0
GreenYellow	绿黄色	#ADFF2F	173,255,47
DarkOliveGreen	暗橄榄绿	#556B2F	85,107,47
YellowGreen	黄绿色	#9ACD32	154,205,50
OliveDrab	橄榄褐色	#6B8E23	107,142,35
Beige	米色/灰棕色	#F5F5DC	245,245,220
LightGoldenrodYellow	亮菊黄	#FAFAD2	250,250,210
Ivory	象牙色	#FFFFF0	255,255,240
LightYellow	浅黄色	#FFFFE0	255,255,224
Yellow	纯黄	#FFFF00	255,255,0
Olive	橄榄	#808000	128,128,0
DarkKhaki	暗黄褐色(深卡叽布)	#BDB76B	189,183,107
LemonChiffon	柠檬绸	#FFFACD	255,250,205
PaleGoldenrod	灰菊黄(苍麒麟色)	#EEE8AA	238,232,170
Khaki	黄褐色(卡叽布)	#F0E68C	240,230,140
Gold	金色	#FFD700	255,215,0
Cornsilk	玉米丝色	#FFF8DC	255,248,220
Goldenrod	金菊黄	#DAA520	218,165,32
DarkGoldenrod	暗金菊黄	#B8860B	184,134,11
FloralWhite	花的白色	#FFFAF0	255,250,240
OldLace	老花色(旧蕾丝)	#FDF5E6	253,245,230
Wheat	浅黄色(小麦色)	#F5DEB3	245,222,179
Moccasin	鹿皮色(鹿皮靴)	#FFE4B5	255,228,181
Orange	橙色	#FFA500	255,165,0
PapayaWhip	番木色(番木瓜)	#FFEFD5	255,239,213
BlanchedAlmond	白杏色	#FFEBCD	255,235,205
NavajoWhite	纳瓦白(土著白)	#FFDEAD	255,222,173
AntiqueWhite	古董白	#FAEBD7	250,235,215
Tan	茶色	#D2B48C	210,180,140
BurlyWood	硬木色	#DEB887	222,184,135
Bisque	陶坯黄	#FFE4C4	255,228,196
DarkOrange	深橙色	#FF8C00	255,140,0
Linen	亚麻布	#FAF0E6	250,240,230
Peru	秘鲁色	#CD853F	205,133,63
PeachPuff	桃肉色	#FFDAB9	255,218,185
SandyBrown	沙棕色	#F4A460	244,164,96
Chocolate	巧克力色	#D2691E	210,105,30
SaddleBrown	重褐色(马鞍棕色)	#8B4513	139,69,19
Seashell	海贝壳	#FFF5EE	255,245,238
Sienna	黄土赭色	#A0522D	160,82,45
LightSalmon	浅鲑鱼肉色	#FFA07A	255,160,122
Coral	珊瑚	#FF7F50	255,127,80
OrangeRed	橙红色	#FF4500	255,69,0
DarkSalmon	深鲜肉/鲑鱼色	#E9967A	233,150,122
Tomato	番茄红	#FF6347	255,99,71
MistyRose	浅玫瑰色(薄雾玫瑰)	#FFE4E1	255,228,225
Salmon	鲜肉/鲑鱼色	#FA8072	250,128,114
Snow	雪白色	#FFFAFA	255,250,250
LightCoral	淡珊瑚色	#F08080	240,128,128
RosyBrown	玫瑰棕色	#BC8F8F	188,143,143
IndianRed	印度红	#CD5C5C	205,92,92
Red	纯红	#FF0000	255,0,0
Brown	棕色	#A52A2A	165,42,42
FireBrick	火砖色(耐火砖)	#B22222	178,34,34
DarkRed	深红色	#8B0000	139,0,0
Maroon	栗色	#800000	128,0,0
White	纯白	#FFFFFF	255,255,255
WhiteSmoke	白烟	#F5F5F5	245,245,245
Gainsboro	淡灰色(庚斯博罗灰)	#DCDCDC	220,220,220
LightGrey	浅灰色	#D3D3D3	211,211,211
Silver	银灰色	#C0C0C0	192,192,192
DarkGray	深灰色	#A9A9A9	169,169,169
Gray	灰色	#808080	128,128,128
DimGray	暗淡的灰色	#696969	105,105,105
Black	纯黑	#000000	0,0,0

jinggod

关注

17
点赞
踩
59

收藏

觉得还不错? 一键收藏
8
评论
markdown的文章样式：字体、颜色、大小、背景色、图片、缩进

自从我学习编程开始，我是一直在用CSDN，但是一直在看大神的博客，这几天才开始写博客，CSDN提供两种编辑方式来写文章。第一种便是；第二种便是markdown。第一种写文章的方式low爆了，作为程序员的我肯定要选一些能够装一下逼的方式。而且，markdown确实是用起来更好用。但也遇到不少的问题，如：给字体换个字体类型，大小，颜色、缩进等基本的文章样式，markdown的基本语法根本做不到。
复制链接

扫一扫

专栏目录