[关闭]
@15606711121 2018-05-02T05:42:14.000000Z 字数 6739 阅读 253

layout: post
title: Markdown工具集
date: 2016-11-20
markDown

categories: 工具

一、快捷键

  1. 加粗 Ctrl + B   
  2. 斜体 Ctrl + I
  3. 引用 Ctrl + Q
  4. 插入链接 Ctrl + L
  5. 插入代码 Ctrl + K
  6. 插入图片 Ctrl + G
  7. 提升标题 Ctrl + H
  8. 有序列表 Ctrl + O
  9. 无需列表 Ctrl + U
  10. 横线 Ctrl + R
  11. 撤销 Ctrl + Z
  12. 重做 Ctrl + Y

二、基本语法

(一) 对字体设置斜体、粗体、删除线

  1. **粗体文本**
  2. *斜体文本*      
  3. *文字*
  4. _文字_
  5. ~~文字~~

效果如下:
粗体
斜体
斜体
删除线

(二) 分级标题, 两种写法

写法1:

  1. # 一级标题
  2. ## 二级标题
  3. ### 三级标题
  4. #### 四级标题 
  5. ##### 五级标题
  6. ###### 六级标题  (这个写法 和 **普通文字** 的效果是一样的)

写法2:

  1. 这是一个一级标题
  2. ===================
  4. 或者
  6. 二级标题
  7. -------------------

(三) 链接

(1) 插入本地图片链接, 语法规则, 有两种写法: 

![图片描述](图片路径"title")
![图片描述](图片路径)
注意: 这个图片描述可以不写

(2) 插入互联网图片, 语法规则: 

![图片描述](图片网络路径)
注意: 这个图片描述也可以不写

网络图片

(3) 自动链接
Markdown 支持以比较简短的自动形式来处理网址和电子邮件信箱, 只需要用 '< >' 包起来, Markdown 就会自动把它转成链接, 也可以直接写, 也是可以显示成链接形式的。例如: 

  1. <https://www.baidu.com>  
  2. https://www.baidu.com

(四) 分割线

你可以再一行中用三个以上的星号(*)、减号(-)、下划线(_)来建立一个分隔线, 注意行内不能有其他东西。你也可以在星号或者减号中间插入空格。

  1. ***
  2. ___   
  3. ---

效果

(五) 代码块

对于程序员来说这个功能是必不可少的, 插入程序代码的方式有两种, 一种是利用缩进(tab), 另一种是利用英文"`"符号 (一般在ESC的下方, 和~是同一个按键) 包裹代码。

(1) 代码块: 缩进4个空格或是1个制表符。

#include <stdio.h>
int main(void)
{
    printf("hello world\n");
}

(2) 行内式: 如果在一个行内需要引用代码, 只要用单反引号`引起来就好了。

这是一个示例示例效果

(3) 多行代码块与语法高亮: 在需要高亮的代码块的前一行和后一行使用三个单反引号包裹, 就可以了(块内的 '\' 请忽略)。

  1. \```
  2. class Demo{
  3.     public static void test () {
  4.     }
  5. }
  6. \```

效果

  1. class Demo{
  2.     public static void test () {
  3.     }
  4. }

(4) 代码块里面包含html代码
在代码块里面, &、< 和 > 会自动转存 HTML 实体, 这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码, 只需要复制粘贴上去, 剩下的 Markdown 都会帮你处理。(注意: 简书的代码块里不支持HTML)

  1. <table>
  2.     <tr>
  3.         <th rowpan="2">值班人员</th>
  4.         <th>星期一</th>
  5.         <th>星期二</th>
  6.         <th>星期三</th>
  7.     </tr>
  8.     <tr>
  9.         <td>小强</td>
  10.         <td>小明</td>
  11.         <td>小瓶</td>
  12.     </tr>
  13. </table>
星期一 星期二 星期三
小强 小明 小瓶

(六) 引用

在被引用的文本前加上 > 符号, 以及一个空格就可以了, 如果只输入一个 > 符号会产生空白的引用。

(1) 基本使用

  1. > 文字
  2. >
  3. > 文字
  4. >
  5. >
  6. > 文字

(2) 引用的嵌套使用

  1. >>> 引用1
  2. >> 引用2
  3. > 引用3

(3) 引用其它要素

引用的区块也可以使用其他 Markdown 语法， 包括标题、列表、代码区块等。

(七) 列表

(1) 无序列表

使用 *, +, - 表示无序列表。
注意: 符号后面一定要有空格, 起到缩进的作用

  1. - 列表文字
  2. - 列表文字
  3. - 列表文字
  5. * 列表文字
  6. * 列表文字
  7. * 列表文字
  9. + 列表文字
  10. + 列表文字
  11. + 列表文字

(2) 有序列表

使用数字和一个英文句点表示有序列表。
注意: 英文句点后面一定要有一个空格, 起到缩进的作用。

  1. 不加空格
  2. 1.有序错误
  3. 2.有序错误
  4. 3.有序错误
  6. 加空格
  7. 1. 有序示范
  8. 2. 有序示范
  9. 3. 有序示范

不加空格
1.有序错误
2.有序错误
3.有序错误

加空格
1. 有序示范
2. 有序示范
3. 有序示范

(3) 有序列表和无序列表同时使用

  1. 无序
  2. * 文字1
  3. * 文字2
  4. 有序
  5. 1. 文字1
  6. 2. 文字2
  7. 混合使用
  8. *1. 文字1
  9. *2. 文字2

无序
* 文字1
* 文字2
有序
1. 文字1
2. 文字2
混合使用
*1. 文字1
*2. 文字2

(4) 列表和其他要素混合使用

列表不光可以单独使用, 也可以使用其他的 Markdown 语法, 包括标题、引用、代码区块等。

注意事项:
(1) 加粗效果不能直接用于列表标题里面, 但是可以嵌套在列表里面混合使用
(2) 列表中包含代码块 (前面加2个tab或者8个空格, 并且需要空一行, 否则不显示)。

(5) 注意事项

在使用列表时, 只要是数字后面加上英文的点, 就会无意间产生列表, 比如2017.12.20这时候想表达的是日期, 有些软件把它误认为是列表。解决方式: 在每个点前面加上 \ 就可以了。

  1. 2017\.12\.20. 今天是个好天气。

(八) 表格

表格的基本写法很简单, 就跟表格形状很相似: 

  1. 学号|姓名|分数
  2. -|-|-
  3. 小明|男|95
  4. 小红|女|70
  5. 小龙|女|55
学号 姓名 分数
小明 男 95
小红 女 70
小龙 女 55

表格对齐方式: 我们可以指定表格的单元格的对齐方式, 冒号在左边表示左对齐, 右边表示右对齐, 两边都有表示居中。

  1. 学号|姓名|分数
  2. :-|:-:|-:
  3. 小明|男|95
  4. 小红|女|70
  5. 小龙|女|55
学号 姓名 分数
小明 男 95
小红 女 70
小龙 女 55

三、常用技巧

(一) 换行

  1. 方法1: 连续两个以上空格 + 回车
  2. 方法2: 使用html语言换行标签: <br>

(二) 缩进字符

  1. 不断行的空格 &nbsp; 或 &#160;
  2. 半角空格 &ensp; 或 &#8194;
  3. 全角空格 &emsp; 或 &#8195;

(三) 如何打出一些特殊符号

  1. \\ 反斜杠
  2. \* 星号
  3. \_ 下划线
  4. \{\}\[\]\(\) 括号
  1. &#10084;
  2. &#10003;
  3. &#9782;
  4. &#9733;
  5. &#9775;

字符对应的 Unicode 编码, 可以看这个网站 https://unicode-table.com/cn/

附上几个工具对特殊字符的支持的对比图:

工具或网站 是否特殊字符
简书 是
MarkDownPad 否(不知道付费版是否支持)
有道云笔记 是
zybuluo.com 是

(四) 字体、字号与颜色

Markdown是一种可以使用普通文本编辑器编写的标记语言, 通过类似HTML的标记语法, 它可以使普通文本内容具有一定的格式。 但是它本身是不支持修改字体、字号与颜色等功能的!

CSDN-markdown 编辑器是其衍生版本, 扩展了 Markdown 的功能 (如表格、脚注、内嵌HTML等), 对, 就是内嵌HTML, 接下来要说的功能就需要内嵌HTML的方法来实现。

字体, 字号和颜色编辑如下代码

  1. <font face="黑体">我是黑体</font>
  2. <font face="微软雅黑">我是微软雅黑</font>
  3. <font face="STCAIYUN">我是华文彩云</font>
  5. Size: 规定文本的尺寸大小。可能的值:从 1 到 7 的数字。浏览器默认是 3。

(五) 链接的高级操作 (这个需要掌握一下, 很有用)

(1) 行内式。这个在上文第二条 基本语法 的 链接 这个小结已经讲过, 这里就不继续讲解了。

(2) 参考式链接。

  1. 在文档要插入图片的地方写 ![图片或网址][标记], 在文档的最后写上[标记]:图片地址 "标题"。(最后这个"标题"可以不填写)
  1. 写法:
  2. [简书地址][1], [文章地址][3], [百度地址][2]
  3. 标记:
  4. [1]:https://www.jianshu.com
  5. [2]:https://www.baidu.com "百度"
  6. [3]:https://www.zybuluo.com/15606711121/note/1063289

(3) 内容目录

在段落中填写 [TOC] 以显示全文内容的目录结构。

(4) 锚点

锚点其实就是页内超链接。比如我这里写下一个锚点, 就能跳转到目录。在目录中点击这个点, 就能跳回来。

注意: 在简书中使用锚点时, 点击会打开一个新的页面, 虽然锚点用的不是很舒服, 但是可以用注脚实现这个功能。

语法说明:

  1. 在你准备跳转到的指定标题后面插入锚点{#标记},  然后再文档其它地方写上连接到锚点的链接。

使用如下:

  1. 插入锚点
  2. ## 标题 {#index}
  3. 链接锚点
  4. 跳转到[标题](#index)

(5) 注脚

语法说明:

  1. 在需要添加注脚的文字后加上注脚名字[^注脚名字], 称为加注。然后在文本的任意位置(一般在文章末尾)添加注脚。

示例:

  1. 使用 Markdown[^1] 可以效率的书写文档, 并直接转换为 HTML[^2] 语言。
  3. [^1]:Markdown是一种纯文本标记语言    
  5. [^2]:HyperText Markup Language 超文本标记语言

注:
(1) 脚注自动被搬运到最后面, 请到文章末尾查看, 并且脚注的链接可以直接回到加注的地方。
(2) 由于简书不支持锚点 , 所以可以用脚注实现页面内部跳转。

(六) 背景色

Markdown本身不支持背景色设置, 需要采用内置html的方式实现: 借助 table, tr, td等表格的 bgcolor 属性来实现背景色的功能。

  1. <table><tr><td bgcolor=orange>背景色为:orange</td></tr></table>

(七) emoji表情符号

emoji表情使用:EMOJICODE:的格式, 详细列表可见
https://www.webpagefx.com/tools/emoji-cheat-sheet/

现在很多 Markdown 工具或者网站都不支持。

下面列出平台对比:

工具或网站 是否支持emoji表情符号
简书 否
MarkDownPad 否(付费版未知)
有道云笔记 否
zybuluo.com 否
github 是

四、高端用法

目前的简书, CSDN, 包括MarkdownPad软件都不支持下面这些功能, 有一个网站 https://www.zybuluo.com 可以支持。

(一) 使用LaTex数学公式

  1. $公式$
  1. $$公式$$

举例:

  1. $\sqrt{x^{2}}$

具体参考 markdown编辑器使用LaTeX数学公式

(二) 流程图

简单介绍一下流程图语法, 仅作了解, 如下

Markdown 流程图语法主要有三部分组成, 流程图语块定义、流程图符号声明和流程处理

语法:

  1. \```flow    
  2. st=>start: 开始     // 定义流程图的开始
  3. op1=>operation: My Operation    // 定义一个长方形的里路程图
  4. c=>condition: YES or NO?    // 定义一个判断
  5. e=>end: 结束    // 定义了流程图结束
  7. st->op1->c      // 从开始到长方形再到判断
  8. c(yes)->e       // 判断为真的时候执行分支
  9. c(no)->op1      // 判断为假的时候执行分支
  10. \```

效果

Created with Raphaël 2.1.2开始My Operation YES or NO? 结束 yesno
*另外,可以在流程图符号后面加上需要跳转的链接, 例如: 
st=>start: 开始:>www.baidu.com*

说明: operation、subroutine 和 inputoutput 分别对应的是 长方形、子程序和四边形, 需要哪一种就写哪一个。

也可以通过(right, left, top, bottom)这四个方向来调整流程图处理的时候调整流程的方式。

  1. \```flow    
  2. st=>start: 开始     // 定义流程图的开始
  3. op1=>operation: My Operation    // 定义一个长方形的里路程图
  4. c=>condition: YES or NO?    // 定义一个判断
  5. e=>end: 结束    // 定义了流程图结束
  7. st(right)->op1(right)->c      // 从开始到长方形再到判断
  8. c(yes,right)->e       // 判断为真的时候执行分支
  9. c(no,top)->op1      // 判断为假的时候执行分支
  10. \```
Created with Raphaël 2.1.2开始My Operation YES or NO? 结束 yesno

更多流程图语法参考: 流程图语法参考

(三) 制作一份待办事宜----Todo列表

  1. **使用规范:**
  2. - [ ] 已处理的事情1
  3. - [ ] 已处理的事情2
  4. - [x] 未处理的事情1
  5. - [x] 未处理的事情22

(四) 绘制 序列图

使用示范:

```seq
Alice->bob: hello bob, how are you?
Note right of bob: bob thinks
bob-->Alice: I am good thanks!
```

效果

Created with Raphaël 2.1.2AliceAliceBobBobHello bob, How are you?Look BobBob thinksI am good, thanks!
```sep
Title: here is a title  // 标题
A->B: Normal line       // 实心箭头, 实线
B-->C: Dashed line      // 实心箭头, 虚线
C->>D: Open arrow       // 空心箭头, 实线
D-->>A: Dashed open arrow   // 空心箭头, 虚线
```

效果

Created with Raphaël 2.1.2Here is a titleAABBCCDDNormal lineDashed lineOpen arrowDashed open arrow

更多语法参考: 序列图语法参考

(五) 绘制 甘特图

  1. \``` gantt
  2. title 项目开发流程
  3. section 项目确定
  4.     需求分析    :a1, 2018-03-05, 3d
  5.     可行性报告  :after a1, 5d
  6.     概念验证    :5d
  7. section 项目实施
  8.     概要设计    :2018-03-13, 5d
  9.     详细设计    :2018-03-18, 10d
  10.     编码        :2018-03-28, 10d
  11.     测试        :2018-04-07, 5d
  12. section 发布验收
  13.     发布: 3d
  14.     验收: 3d
  15. \```

效果

03/0503/1203/1903/2604/0204/0904/16需求分析 可行性报告 概念验证 概要设计 详细设计 编码 测试 发布验收项目确定项目实施发布验收项目开发流程

更多语法参考: 甘特图语法参考

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注