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

  • A+
所属分类:其他

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

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

  不过幸运的是,....

  :输入一个空格
  :输入一个空格
  :输入两个空格

注意:别忘了分号

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" alt="markdown的文章样式:字体、颜色、大小、背景色、图片、缩进" width="400" height="400" alt=" 图片不见了。。。 "/>

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

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

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

```

红色背景

```

效果:

红色背景

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

```

```

  1. 简单点的方法,就直接使用 br 标签

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

效果:
内容1

内容2

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

```

自从我学习编程开始

本文的首行
本文的首行
```

效果:
本文的首行

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

颜色表

| | | | | | |
| --- | --- | --- | --- | --- | --- |
| | 颜色名 | 中文名称 | 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 | |

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin