本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:
目录
‘[TOC]’标签需要和
 
- 目录
 
- TOC标签使用
 - MarkDown 图片和链接以及文字
 
- 图片
 - 首行缩进
 - 标题背景颜色
 - 字体大小
 - 链接
 - 字体字号与颜色图片居中
 
- 颜色名列表
 
- MarkDown图片居中
 
- MarkDown显示语法的方法
 - Html中图片显示
 
- 最常用的字符实体Character Entities
 - 快捷键
 - Markdown及扩展
 
- 表格
 - 定义列表
 - 代码块
 - 脚注
 - 数学公式
 - UML 图
 
- 离线写博客
 - 浏览器兼容
 - 颜色参考
 
 
- Markdown和扩展Markdown简洁的语法
 - 代码块高亮
 - 图片链接和图片上传
 - LaTex数学公式
 - UML序列图和流程图
 - 离线写博客
 - 导入导出Markdown文件
 - 丰富的快捷键
 
TOC标签使用
TOC是一个目录生成的MarkDown标签,使用的时候,需要有一个上级目录,然后使用[TOC]就可以自动生成目录了
#目录
[TOC]MarkDown 图片和链接以及文字
图片
图片的显示和链接类似,不同的是,MarkDown语法中,图片前面多了一个! [图片描述](图片地址)
例子
<!--markdown中图片显示-->
 首行缩进
对于Markdown编辑器来说,对于中文不是特别的方便,需要通过html的代码,来实现首行缩进的操作
半方大的空白  或 
全方大的空白  或 
不断行的空白格  或 标题背景颜色
背景颜色,yellowcong背景颜色,yellowcong  | 
背景颜色,yellowcong背景颜色,yellowcong  | 
背景颜色,yellowcong背景颜色,yellowcong  | 
背景颜色,yellowcong背景颜色,yellowcong  | 
对于markdown来说,他不支持直接写背景,但是我们可以通过table这个标签中的的td标签,设定 bgcolor这个属性来设定显示的颜色
<table><tr><td bgcolor="#48525E">
<font color="white"><big>背景颜色,yellowcong</big><small>背景颜色,yellowcong</small></font>
</td></tr>
<tr><td bgcolor="red">
<font color="white"><big>背景颜色,yellowcong</big><small>背景颜色,yellowcong</small></font>
</td></tr>
<tr><td bgcolor="blue">
<font color="white"><big>背景颜色,yellowcong</big><small>背景颜色,yellowcong</small></font>
</td></tr>
</table>字体大小
字体大小,yellowcong字体大小,yellowcong对于markdown来说,字体大小通过font属性设置,并不好,可以使用big和small标签,可以解决字体大小问题。
<big>背景颜色,yellowcong</big><small>背景颜色,yellowcong</small>链接
语法
<!--markdown中图片显示-->
 [链接名称](http://www.baidu.com)例子
百度
字体、字号与颜色图片居中
<font face="黑体">我是黑体字</font>  
    <font face="微软雅黑">我是微软雅黑</font>  
    <font face="STCAIYUN">需要粘贴的内容</font>  
    <font color=#0099ff size=7 face="黑体">需要粘贴的内容</font>  
    <font color=#00ffff size=72>需要粘贴的内容</font>  
    <font color=#DC143C size=4> 需要粘贴的内容</font>Size:规定文本的尺寸大小。可能的值:从 1 到 7 的数字。浏览器默认值是 3。
颜色名列表
颜色表,是通过table标签写的背景, 不是直接出来的
方法说明  | 颜色名称  | 颜色  | 
此处实现方法利用 CSDN-markdown 内嵌 html 语言的优势  | Hotpink  | rgb(240, 248, 255)  | 
借助 table, tr, td 等表格标签的 bgcolor 属性实现背景色设置  | AntiqueWhite  | rgb(255, 192, 203)  | 
<table><tbody>
    <tr>
        <th>方法说明</th><th>颜色名称</th><th>颜色</th>
    </tr>
    <tr>
        <td><font color="Hotpink">此处实现方法利用 CSDN-markdown 内嵌 html 语言的优势</font></td><td><font color="Hotpink">Hotpink</font></td><td bgcolor="Hotpink">rgb(240, 248, 255)</td>
    </tr>
    <tr>
        <td><font color="Pink">借助 table, tr, td 等表格标签的 bgcolor 属性实现背景色设置</font></td><td><font color="pink">AntiqueWhite</font></td><td bgcolor="Pink">rgb(255, 192, 203)</td>
    </tr>
</table>MarkDown图片居中
MarkDown显示图片,直接显示的时候,不能调节图片的大小和位置,需要使用Html的语法来解决问题
MarkDown显示语法的方法
<!--markdown中图片显示-->
 显示效果
Html中图片显示
<!--这个地方,不知道为啥,直接写就会导致下面的样式变了,所以在前面,后面,加上   (空格符),就会没有问题-->
 <div align="center">
     <img src="http://avatar.csdn.net/A/6/B/3_yelllowcong.jpg" width = "100" height = "100" alt="图片名称" />
</div>
<!--实际代码-->
 <div align="center">
    <img src="http://avatar.csdn.net/A/6/B/3_yelllowcong.jpg" width = "100" height = "100" alt="图片名称" />
</div> 显示效果
 
 
 
  

最常用的字符实体(Character Entities)
在MarkDown中,注释小段代码可以使用 `注释的类容`
显示结果  | 说明  | Entity Name  | Entity Number  | 
   | 显示一个空格  | 
  | 
  | 
<  | 小于  | 
  | 
  | 
>  | 大于  | 
  | 
  | 
&  | &符号  | 
  | 
  | 
“  | 双引号  | 
  | 
  | 
快捷键
名称  | 快捷键  | 
加粗  | 
  | 
斜体  | 
  | 
引用  | 
  | 
插入链接  | 
  | 
插入代码  | 
  | 
插入图片  | 
  | 
提升标重点内容题  | 
  | 
有序列表  | 
  | 
无序列表  | 
  | 
横线  | 
  | 
撤销  | 
  | 
重做  | 
  | 
Markdown及扩展
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]
使用简单的符号标识不同的标题,将某些文字标记为粗体或者斜体,创建一个链接等,详细语法参考帮助?。
本编辑器支持 Markdown Extra , 扩展了很多好用的功能。具体请参考Github.
表格
Markdown Extra 表格语法:
项目  | 价格  | 
Computer  | $1600  | 
Phone  | $12  | 
Pipe  | $1  | 
可以使用冒号来定义对齐方式:
项目  | 价格  | 数量  | 
Computer  | 1600 元  | 5  | 
Phone  | 12 元  | 12  | 
Pipe  | 1 元  | 234  | 
定义列表
Markdown Extra 定义列表语法:
 
   项目1 
  
 
   项目2 
  
 
   定义 A 
  
 
   定义 B 
  
 
   项目3 
  
 
   定义 C 
  
 
定义 D
定义D内容
代码块
代码块语法遵循标准markdown代码,例如:
@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 > param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None
class SomeClass:
    pass
>>> message = '''interpreter
... prompt'''脚注
生成一个脚注1.
数学公式
使用MathJax渲染LaTex 数学公式,详见math.stackexchange.com.
- 行内公式,数学公式为:Γ(n)=(n−1)!∀n∈N。
 - 块级公式:
 
 
x=−b±b2−4ac−−−−−−−√2a
更多LaTex语法请参考 这儿.
UML 图:
可以渲染序列图:
 
Created with Raphaël 2.1.0 张三 张三 李四 李四 嘿,小四儿, 写博客了没? 李四愣了一下,说: 忙得吐血,哪有时间写。
 
或者流程图:
 
Created with Raphaël 2.1.0 开始 我的操作 确认? 结束 yes no
 
- 关于 序列图 语法,参考 这儿,
 - 关于 流程图 语法,参考 这儿.
 
离线写博客
即使用户在没有网络的情况下,也可以通过本编辑器离线写博客Markdown编辑器使用浏览器离线存储将内容保存在本地。
用户写博客的过程中,内容实时保存在浏览器缓存中,在用户关闭浏览器或者其它异常情况下,内容不会丢失。用户再次打开浏览器时,会显示上次用户正在编辑的没有发表的内容。
博客发表后,本地缓存将被删除。
用户可以选择
注意:虽然浏览器存储大部分时候都比较可靠,但为了您的数据安全,在联网后,请务必及时发表或者保存到服务器草稿箱。
浏览器兼容
- 目前,本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
 - IE9以下不支持
 - IE9,10,11存在以下问题
 
- 不支持离线功能
 - IE9不支持文件导入导出
 - IE10不支持拖拽文件导入
 
颜色参考
 颜色名  |  十六进制颜色值  |  颜色  | 
 AliceBlue  |  #F0F8FF  |  rgb(240, 248, 255)  | 
 AntiqueWhite  |  #FAEBD7  |  rgb(250, 235, 215)  | 
 Aqua  |  #00FFFF  |  rgb(0, 255, 255)  | 
 Aquamarine  |  #7FFFD4  |  rgb(127, 255, 212)  | 
 Azure  |  #F0FFFF  |  rgb(240, 255, 255)  | 
 Beige  |  #F5F5DC  |  rgb(245, 245, 220)  | 
 Bisque  |  #FFE4C4  |  rgb(255, 228, 196)  | 
 Black  |  #000000  |  rgb(0, 0, 0)  | 
 BlanchedAlmond  |  #FFEBCD  |  rgb(255, 235, 205)  | 
 Blue  |  #0000FF  |  rgb(0, 0, 255)  | 
 BlueViolet  |  #8A2BE2  |  rgb(138, 43, 226)  | 
 Brown  |  #A52A2A  |  rgb(165, 42, 42)  | 
 BurlyWood  |  #DEB887  |  rgb(222, 184, 135)  | 
 CadetBlue  |  #5F9EA0  |  rgb(95, 158, 160)  | 
 Chartreuse  |  #7FFF00  |  rgb(127, 255, 0)  | 
 Chocolate  |  #D2691E  |  rgb(210, 105, 30)  | 
 Coral  |  #FF7F50  |  rgb(255, 127, 80)  | 
 CornflowerBlue  |  #6495ED  |  rgb(100, 149, 237)  | 
 Cornsilk  |  #FFF8DC  |  rgb(255, 248, 220)  | 
 Crimson  |  #DC143C  |  rgb(220, 20, 60)  | 
 Cyan  |  #00FFFF  |  rgb(0, 255, 255)  | 
 DarkBlue  |  #00008B  |  rgb(0, 0, 139)  | 
 DarkCyan  |  #008B8B  |  rgb(0, 139, 139)  | 
 DarkGoldenRod  |  #B8860B  |  rgb(184, 134, 11)  | 
 DarkGray  |  #A9A9A9  |  rgb(169, 169, 169)  | 
 DarkGreen  |  #006400  |  rgb(0, 100, 0)  | 
 DarkKhaki  |  #BDB76B  |  rgb(189, 183, 107)  | 
 DarkMagenta  |  #8B008B  |  rgb(139, 0, 139)  | 
 DarkOliveGreen  |  #556B2F  |  rgb(85, 107, 47)  | 
 Darkorange  |  #FF8C00  |  rgb(255, 140, 0)  | 
 DarkOrchid  |  #9932CC  |  rgb(153, 50, 204)  | 
 DarkRed  |  #8B0000  |  rgb(139, 0, 0)  | 
 DarkSalmon  |  #E9967A  |  rgb(233, 150, 122)  | 
 DarkSeaGreen  |  #8FBC8F  |  rgb(143, 188, 143)  | 
 DarkSlateBlue  |  #483D8B  |  rgb(72, 61, 139)  | 
 DarkSlateGray  |  #2F4F4F  |  rgb(47, 79, 79)  | 
 DarkTurquoise  |  #00CED1  |  rgb(0, 206, 209)  | 
 DarkViolet  |  #9400D3  |  rgb(148, 0, 211)  | 
 DeepPink  |  #FF1493  |  rgb(255, 20, 147)  | 
 DeepSkyBlue  |  #00BFFF  |  rgb(0, 191, 255)  | 
 DimGray  |  #696969  |  rgb(105, 105, 105)  | 
 DodgerBlue  |  #1E90FF  |  rgb(30, 144, 255)  | 
 Feldspar  |  #D19275  |  rgb(209, 146, 117)  | 
 FireBrick  |  #B22222  |  rgb(178, 34, 34)  | 
 FloralWhite  |  #FFFAF0  |  rgb(255, 250, 240)  | 
 ForestGreen  |  #228B22  |  rgb(34, 139, 34)  | 
 Fuchsia  |  #FF00FF  |  rgb(255, 0, 255)  | 
 Gainsboro  |  #DCDCDC  |  rgb(220, 220, 220)  | 
 GhostWhite  |  #F8F8FF  |  rgb(248, 248, 255)  | 
 Gold  |  #FFD700  |  rgb(255, 215, 0)  | 
 GoldenRod  |  #DAA520  |  rgb(218, 165, 32)  | 
 Gray  |  #808080  |  rgb(128, 128, 128)  | 
 Green  |  #008000  |  rgb(0, 128, 0)  | 
 GreenYellow  |  #ADFF2F  |  rgb(173, 255, 47)  | 
 HoneyDew  |  #F0FFF0  |  rgb(240, 255, 240)  | 
 HotPink  |  #FF69B4  |  rgb(255, 105, 180)  | 
 IndianRed  |  #CD5C5C  |  rgb(205, 92, 92)  | 
 Indigo  |  #4B0082  |  rgb(75, 0, 130)  | 
 Ivory  |  #FFFFF0  |  rgb(255, 255, 240)  | 
 Khaki  |  #F0E68C  |  rgb(240, 230, 140)  | 
 Lavender  |  #E6E6FA  |  rgb(230, 230, 250)  | 
 LavenderBlush  |  #FFF0F5  |  rgb(255, 240, 245)  | 
 LawnGreen  |  #7CFC00  |  rgb(124, 252, 0)  | 
 LemonChiffon  |  #FFFACD  |  rgb(255, 250, 205)  | 
 LightBlue  |  #ADD8E6  |  rgb(173, 216, 230)  | 
 LightCoral  |  #F08080  |  rgb(240, 128, 128)  | 
 LightCyan  |  #E0FFFF  |  rgb(224, 255, 255)  | 
 LightGoldenRodYellow  |  #FAFAD2  |  rgb(250, 250, 210)  | 
 LightGrey  |  #D3D3D3  |  rgb(211, 211, 211)  | 
 LightGreen  |  #90EE90  |  rgb(144, 238, 144)  | 
 LightPink  |  #FFB6C1  |  rgb(255, 182, 193)  | 
 LightSalmon  |  #FFA07A  |  rgb(255, 160, 122)  | 
 LightSeaGreen  |  #20B2AA  |  rgb(32, 178, 170)  | 
 LightSkyBlue  |  #87CEFA  |  rgb(135, 206, 250)  | 
 LightSlateBlue  |  #8470FF  |  rgb(132, 112, 255)  | 
 LightSlateGray  |  #778899  |  rgb(119, 136, 153)  | 
 LightSteelBlue  |  #B0C4DE  |  rgb(176, 196, 222)  | 
 LightYellow  |  #FFFFE0  |  rgb(255, 255, 224)  | 
 Lime  |  #00FF00  |  rgb(0, 255, 0)  | 
 LimeGreen  |  #32CD32  |  rgb(50, 205, 50)  | 
 Linen  |  #FAF0E6  |  rgb(250, 240, 230)  | 
 Magenta  |  #FF00FF  |  rgb(255, 0, 255)  | 
 Maroon  |  #800000  |  rgb(128, 0, 0)  | 
 MediumAquaMarine  |  #66CDAA  |  rgb(102, 205, 170)  | 
 MediumBlue  |  #0000CD  |  rgb(0, 0, 205)  | 
 MediumOrchid  |  #BA55D3  |  rgb(186, 85, 211)  | 
 MediumPurple  |  #9370D8  |  rgb(147, 112, 216)  | 
 MediumSeaGreen  |  #3CB371  |  rgb(60, 179, 113)  | 
 MediumSlateBlue  |  #7B68EE  |  rgb(123, 104, 238)  | 
 MediumSpringGreen  |  #00FA9A  |  rgb(0, 250, 154)  | 
 MediumTurquoise  |  #48D1CC  |  rgb(72, 209, 204)  | 
 MediumVioletRed  |  #C71585  |  rgb(199, 21, 133)  | 
 MidnightBlue  |  #191970  |  rgb(25, 25, 112)  | 
 MintCream  |  #F5FFFA  |  rgb(245, 255, 250)  | 
 MistyRose  |  #FFE4E1  |  rgb(255, 228, 225)  | 
 Moccasin  |  #FFE4B5  |  rgb(255, 228, 181)  | 
 NavajoWhite  |  #FFDEAD  |  rgb(255, 222, 173)  | 
 Navy  |  #000080  |  rgb(0, 0, 128)  | 
 OldLace  |  #FDF5E6  |  rgb(253, 245, 230)  | 
 Olive  |  #808000  |  rgb(128, 128, 0)  | 
 OliveDrab  |  #6B8E23  |  rgb(107, 142, 35)  | 
 Orange  |  #FFA500  |  rgb(255, 165, 0)  | 
 OrangeRed  |  #FF4500  |  rgb(255, 69, 0)  | 
 Orchid  |  #DA70D6  |  rgb(218, 112, 214)  | 
 PaleGoldenRod  |  #EEE8AA  |  rgb(238, 232, 170)  | 
 PaleGreen  |  #98FB98  |  rgb(152, 251, 152)  | 
 PaleTurquoise  |  #AFEEEE  |  rgb(175, 238, 238)  | 
 PaleVioletRed  |  #D87093  |  rgb(216, 112, 147)  | 
 PapayaWhip  |  #FFEFD5  |  rgb(255, 239, 213)  | 
 PeachPuff  |  #FFDAB9  |  rgb(255, 218, 185)  | 
 Peru  |  #CD853F  |  rgb(205, 133, 63)  | 
 Pink  |  #FFC0CB  |  rgb(255, 192, 203)  | 
 Plum  |  #DDA0DD  |  rgb(221, 160, 221)  | 
 PowderBlue  |  #B0E0E6  |  rgb(176, 224, 230)  | 
 Purple  |  #800080  |  rgb(128, 0, 128)  | 
 Red  |  #FF0000  |  rgb(255, 0, 0)  | 
 RosyBrown  |  #BC8F8F  |  rgb(188, 143, 143)  | 
 RoyalBlue  |  #4169E1  |  rgb(65, 105, 225)  | 
 SaddleBrown  |  #8B4513  |  rgb(139, 69, 19)  | 
 Salmon  |  #FA8072  |  rgb(250, 128, 114)  | 
 SandyBrown  |  #F4A460  |  rgb(244, 164, 96)  | 
 SeaGreen  |  #2E8B57  |  rgb(46, 139, 87)  | 
 SeaShell  |  #FFF5EE  |  rgb(255, 245, 238)  | 
 Sienna  |  #A0522D  |  rgb(160, 82, 45)  | 
 Silver  |  #C0C0C0  |  rgb(192, 192, 192)  | 
 SkyBlue  |  #87CEEB  |  rgb(135, 206, 235)  | 
 SlateBlue  |  #6A5ACD  |  rgb(106, 90, 205)  | 
 SlateGray  |  #708090  |  rgb(112, 128, 144)  | 
 Snow  |  #FFFAFA  |  rgb(255, 250, 250)  | 
 SpringGreen  |  #00FF7F  |  rgb(0, 255, 127)  | 
 SteelBlue  |  #4682B4  |  rgb(70, 130, 180)  | 
 Tan  |  #D2B48C  |  rgb(210, 180, 140)  | 
 Teal  |  #008080  |  rgb(0, 128, 128)  | 
 Thistle  |  #D8BFD8  |  rgb(216, 191, 216)  | 
 Tomato  |  #FF6347  |  rgb(255, 99, 71)  | 
 Turquoise  |  #40E0D0  |  rgb(64, 224, 208)  | 
 Violet  |  #EE82EE  |  rgb(238, 130, 238)  | 
 VioletRed  |  #D02090  |  rgb(208, 32, 144)  | 
 Wheat  |  #F5DEB3  |  rgb(245, 222, 179)  | 
 White  |  #FFFFFF  |  rgb(255, 255, 255)  | 
 WhiteSmoke  |  #F5F5F5  |  rgb(245, 245, 245)  | 
 Yellow  |  #FFFF00  |  rgb(255, 255, 0)  | 
 YellowGreen  |  #9ACD32  |  rgb(154, 205, 50)  | 










