1. 程式人生 > >markdown的文章樣式:字型、顏色、大小、背景色、圖片、縮排

markdown的文章樣式:字型、顏色、大小、背景色、圖片、縮排

  自從我學習程式設計開始,我是一直在用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" 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>
  1. 簡單點的方法,就直接使用 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