MarkDown 编辑器学习

MarkDown 编辑器学习

是一种简单快键的文字排版工具，可以用于编写说明文档，鉴于其语法简洁明了，且其渲染生成的样式简单美观，很多开发者也用它来写博客，已被国内外很多流行博客平台所支持。生成的文件后缀名为.MD，亦可以导出生成HTML或PDF文件。

---

常用语法备忘

（一）标题

说明：在段落首用#申明标题，根据#数区别标题级别，Markdown一共有6级标题，对应于HTML中的<h1>-<h6>标签，不同级别的标题除了大小区别外，样式也存在差异。

格式：#表示一级标题，##表示二级标题，以此类推；什么也不标注即表示以正文格式输入。

（二）列表

说明：分为无序列表和有序列表，分别对应于HTML中的<ul>和<ol>标签

格式：

无序列表： * listName // 星号+空格+名字，也可以用+，-代替*，效果一样
有序列表： 1. listName // 数字+英文点+空格+名字

（三）图片

说明：对应于HTML中的<image>标签，可添加本地图片或网络图片。如果是需要分享到网上的文章，图像最好要先上传到网上，如github。MarkDown也自带上传图像到网络的功能，操作为：a).点击图标或快捷键“Ctrl+G”; b).在弹出框中按"浏览并上传"按钮上传指定图像。

注意：网盘链接不行，因为网盘分享的并非图像路径。

格式：有两种格式：行内格式、参考格式；

1. 行内格式：图片地址直接跟在图片文字后面。
   
   ![alt text](/path/to/img.jpg "Title")

   其生成的HTML为：<img src="/path/to/img.jpg" alt="alt text" title="Title" /> ，alt表示图像生成失败时的替换文本。

2. 参考格式：在引用处只为图片地址申明一个名称，然后在文件其他地方定义图片地址内容，地址名称可以由字母、数字、空格组成，不区分大小；

    这是一副图像![alt text][1]
    [1]: /path/to/img.jpg "Title"
   

（四）链接

格式：对应于HTML中<a>标签，有三种格式：行内格式、参考格式、自动链接格式；

1. 行内格式

   这是一个链接[example link](http://example.com/ "With a Title").

   其生成的HTML为：<p>这是一个链接<a href="http://example.com/" title="With a Title">example link</a>.</p>。

2. 参考格式

    这是链接一[example link1][1],这是链接二[example link1][2]；
    [1]: http://google.com/ "Google"
    [2]: http://search.yahoo.com/ "Yahoo Search"
   

3. 自动链接格式：对于链接文字和链接内容一致的网址或是电子邮箱链接，可以以较为简短的自动链接格式标注，即直接用方括号将链接起来；

   这是百度网址：<http://www.baidu.com>

（五）代码

格式：有三种格式：行内代码、代码块，指定语言代码块；指定语言代码块中的代码将以指定语言标记风格进行标记展示。

1. 行内代码：在代码首尾尾加`符号;

    This is a code `int i = 0`;
   

2. 代码块：代码段向右缩进4个空格或是一个tab；

    This is a code segment
   
    	int i = 0;
    	i = i + 1;
   

3. 指定语言代码块：代码块首 + ```html（或js,java...）； 代码块尾 + ```；（以下代码在markdown上无法渲染，但是在博客园里能正常显示，谁知道是为什么啊？）

    ```html
    <p> woshishui <p>
    <p> woshinia <p>
    ```
   

（六）其他

• 转义符号： Markdown中的转义符号为'\'，可转义的字符包括：*，#，\，`，_，{}，[],()，+，-，.，!；也可以用ASCII码，比如表格里面加'|'可以用|表示；
• 分割线： ***
• 粗体：语句首尾加**，对应于HTML语言的<em>标签；
• 斜体：语句首尾加*，对应于HTML语言的<strong>标签；
• 缩进：$emsp表示空格；

常用快捷键备忘

• 加粗 Ctrl + B
• 斜体 Ctrl + I
• 引用 Ctrl + Q
• 插入链接 Ctrl + L
• 插入代码 Ctrl + K
• 插入图片 Ctrl + G

衍生阅读：

[1] 数学公式对应的markdown代码

参考链接

[1] Markdown 语法说明

[2] markdown学习笔记

[3] MarkDown 的基本语法和快捷键，20分钟快速学会

[4] 前端学Markdown