什么?你还不会使用Markdown?快来看看吧

 

目录

Markdown是什么?

为什么要使用Markdown?

Markdown语法格式

标题

段落

着重

粗体

斜体

粗体+斜体

扫描二维码关注公众号,回复: 12205326 查看本文章

块引用

清单

有序列表

无序列表

自定义列表

代码

水平线

链接

图片

转义字符

表格

流程图

标准流程图

时序图

标准时序图

 

​带样式时序图

甘特图

推荐的Markdown编辑器

在线网站(http://www.mdeditor.com/)

Mou

Typora


为了显示Markdown的实际代码,特此使用的CSDN富文本编辑器,文章的截图都来自在线Markdown网站http://www.mdeditor.com/

Markdown是什么?

  • Markdown是一种轻量级的标记语言,可用于将格式设置元素添加到纯文本文档中。Markdown 由John Gruber于2004年创建,如今已成为世界上最受欢迎的标记语言之一。
  • 使用Markdown与使用WYSIWYG编辑器不同。在Microsoft Word之类的应用程序中,单击按钮以设置单词和短语的格式,更改立即可见。Markdown不是那样的。当您创建Markdown格式的文件时,可以在文本中添加Markdown语法,以指示哪些单词和短语看起来应该有所不同。

为什么要使用Markdown?

  • Markdown可以用于一切。人们使用它来创建网站文档便笺书籍演示文稿电子邮件技术文档

  • Markdown是便携式的。几乎可以使用任何应用程序打开包含Markdown格式文本的文件。如果您决定不喜欢当前使用的Markdown应用程序,则可以将Markdown文件导入另一个Markdown应用程序。这与Microsoft Word等文字处理应用程序形成了鲜明的对比,Microsoft Word将文字内容锁定为专有文件格式。

  • Markdown是独立于平台的。您可以在运行任何操作系统的任何设备上创建Markdown格式的文本。

  • MarkDown是未来的证明。即使您正在使用的应用程序将来会在某个时候停止工作,您仍然可以使用文本编辑应用程序读取Markdown格式的文本。当涉及需要无限期保存的书籍,大学论文和其他里程碑文件时,这是一个重要的考虑因素。

  • Markdown无处不在。Reddit和GitHub等网站都支持Markdown,许多桌面和基于Web的应用程序都支持它。

Markdown

Markdown语法格式

注意:使用Markdown并不意味着您也不能使用HTML。您可以将HTML标签添加到任何Markdown文件中。如果您更喜欢某些HTML标记而不是Markdown语法,这将很有帮助。例如,有些人发现将HTML标签用于图像更容易。

标题

要创建标题,用#在单词或短语的前面添加数字符号()。您使用的数字符号的数量应与标题级别相对应。例如

Markdown HTML 渲染输出
# Heading level 1 <h1>Heading level 1</h1>

标题等级1

## Heading level 2 <h2>Heading level 2</h2>

标题等级2

### Heading level 3 <h3>Heading level 3</h3>

标题级别3

#### Heading level 4 <h4>Heading level 4</h4>

标题级别4

##### Heading level 5 <h5>Heading level 5</h5>

标题5

###### Heading level 6 <h6>Heading level 6</h6>

标题等级6

 或者,在文本下方的行上,添加任意数量的==标题级别1的--字符或标题级别2的字符

Markdown HTML 渲染输出
Heading level 1
===============
<h1>Heading level 1</h1>

标题等级1

Heading level 2
---------------
<h2>Heading level 2</h2>

标题等级2

段落

创建段落直接使空白行分隔一行或多行文本,而不是使用制表符或者空格。当然在脱离其他格式比如有序列表、无序列表这种格式的时候,也是需要用空白行分隔一行或多行。

Markdown HTML 渲染输出
I really like using Markdown.

I think I'll use it to format all of my documents from now on.
<p>I really like using Markdown.</p>

<p>I think I'll use it to format all of my documents from now on.</p>

我真的很喜欢使用Markdown。

我想从现在开始,我将使用它来格式化所有文档。

着重

粗体

要加粗文本,在单词或短语的前后添加两个星号或下划线。要加粗一个单词的中部以强调,请在字母周围添加两个星号,中间不要带空格。

Markdown HTML 渲染输出
I just love **bold text**. I just love <strong>bold text</strong>. 我只喜欢粗体字
I just love __bold text__. I just love <strong>bold text</strong>. 我只喜欢粗体字

斜体

要斜体显示文本,在单词或短语的前后添加一个星号或下划线。要斜体突出单词的中间部分,请在字母周围添加一个星号,中间不要带空格。

Markdown HTML 渲染输出
Italicized text is the *cat's meow*. Italicized text is the <em>cat's meow</em>. 斜体文字是猫的叫声
Italicized text is the _cat's meow_. Italicized text is the <em>cat's meow</em>. 斜体文字是猫的叫声

粗体+斜体

要同时突出显示带有粗体和斜体的文本,在单词或短语的前后添加三个星号或下划线。

Markdown HTML 渲染输出
This text is ***really important***. This text is <strong><em>really important</em></strong>. 这段文字真的很重要
This text is ___really important___. This text is <strong><em>really important</em></strong>. 这段文字真的很重要

块引用

要使用块引用,可以在段落前面添加一个>

多个段落使用块引用时候,在每行前面添加>

嵌套块引用的时候,在段落的前面添加>>

> 我是块引用

>> 我是嵌套引用

> 我也是块引用

渲染效果如下

block

清单

有序列表

创建有序列表只需要在各个项之前添加数字和点和空格(1. ),其中你无需保证数字是有序的,当然你也可以通过制表符,缩进四个字符来进行嵌套

Markdown HTML 渲染输出
1. First item
2. Second item
3. Third item
4. Fourth item
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项
1. First item
8. Second item
3. Third item
5. Fourth item
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项
1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
4. Fourth item
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item
<ol>
<li>Indented item</li>
<li>Indented item</li>
</ol>
</li>
<li>Fourth item</li>
</ol>
  1. 第一项
  2. 第二项
  3. 第三项
    1. 缩进项
    2. 缩进项
  4. 第四项

无序列表

要创建无序列表,可以在订单项前添加破折号(-),星号(*)或加号(+),可以混合使用,最后都可以被成功渲染。缩进一个或多个项目以创建嵌套列表。

Markdown HTML 渲染输出
* First item
* Second item
* Third item
* Fourth item
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
  • 第一项
  • 第二项
  • 第三项
  • 第四项
+ First item
* Second item
- Third item
+ Fourth item
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
  • 第一项
  • 第二项
  • 第三项
  • 第四项
- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item
<ul>
<li>Indented item</li>
<li>Indented item</li>
</ul>
</li>
<li>Fourth item</li>
</ul>
  • 第一项
  • 第二项
  • 第三项
    • 缩进项
    • 缩进项
  • 第四项

自定义列表

一些Markdown处理器允许您创建自定义列表和术语及其相应的定义。要创建定义列表,请在第一行上键入术语。下一行,键入一个冒号后跟一个空格和定义。

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

渲染结果如下

First Term
This is the definition of the first term.

Second Term
This is one definition of the second term.
This is another definition of the second term.

如果你希望在列表中添加一些其他的东西,比如引用、代码、图片等,可以将该元素缩进四个空格或一个制表符,例如

列表中添加

代码

要将单词或短语表示为代码,请将其括在勾号(`),Esc下方的案件

如果要表示为代码的单词或短语包含一个或多个刻度线,可以通过将单词或短语括在双刻度线(``)中来对其进行转义。

请在代码块的每一行缩进至少四个空格或一个制表符,或者使用三个(`)包括

渲染效果如下

block

水平线

要创建水平线,可以单独在一行上使用三个或更多的星号(***),破折号(---)或下划线(___),所有这三个的渲染输出看起来都相同:

水平线

链接

  • 要创建链接,请将链接文本括在方括号(例如[Duck Duck Go])中,然后立即在URL后面加上括号(例如(https://duckduckgo.com))中的URL 
  • 可以选择为链接添加标题。当用户将鼠标悬停在链接上时,这将显示为工具提示。要添加标题,请将其括在URL后面的括号中
  • 要将URL或电子邮件地址快速转换为链接,请将其括在尖括号中
  • 为了强调链接,请在方括号和括号之前和之后添加强调语法

图片

  • 要添加图像,请添加感叹号(!),然后在括号中添加替代文本,并在括号中添加图像资源的路径或URL。您可以选择在括号中的URL之后添加标题。
  • 要向图像添加链接,请将图像的Markdown括在方括号中,然后在括号中添加链接。

转义字符

要显示原义字符,否则将用于设置Markdown文档中的文本格式\,可以在字符前面添加反斜杠(\)

可以使用反斜杠转义以下字符。

字符 名称
\ 反斜杠
` 刻度线
* 星号
_ 下划线
{} 大括号
[] 中括号
() 括号
# 井号
+ 加号
- 减号(连字符)
.
! 感叹号
| 管道

表格

  • 要添加表,请使用三个或多个连字符(---)创建每列的标题,连字符的长度可以不用等长,并使用管道(|)分隔每列。可以选择在表的任一端添加管道。
  • 可以通过:在标题行内的连字符的左侧,右侧或两侧添加一个冒号(:),以使列中的文本左,右或居中对齐
  • 您可以格式化表格中的文本。例如,您可以添加链接、代码(仅在刻度线(`)中显示单词或短语,而不能在代码块中添加)和强调。不能添加标题,块引用,列表,水平规则,图像或HTML标签。

以上都是比较常用的,Markdown还可以用来绘制流程图、时序图、甘特图

这些复杂图形的绘制都是使用代码块实现的,指定代码块的解析语言,按照响应的绘制语法即可实现。

  • 流程图——指定 mermaid(样式流程图) 或 flow (标准流程图)解析语言
  • 时序图——指定 sequence(标准时序图) 或 mermaid(样式时序图) 解析语言
  • 甘特图——指定 mermaid 解析语言

流程图

graph 指定流程图方向:graph LR 横向,graph TD 纵向

  • 元素的形状定义
    1. id[描述] 以直角矩形绘制
    2. id(描述) 以圆角矩形绘制
    3. id{描述} 以菱形绘制
    4. id>描述] 以不对称矩形绘制
    5. id((描述)) 以圆形绘制
  • 线条定义
    1. A-->B 带箭头指向
    2. A---B 不带箭头连接
    3. A-.-B 虚线连接
    4. A-.->B 虚线指向
    5. A==>B 加粗箭头指向
    6. A--描述---B 不带箭头指向并在线段中间添加描述
    7. A--描述-->B 带描述的箭头指向
    8. A-.描述.->B 带描述的虚线连指向
    9. A==描述==>B 带描述的加粗箭头指向

实例

```mermaid
graph LR
    A(开始) -->B(起床)
    B --天气不好--- C>干活]
    C ==> D{休息时间到了}
    D -.yes.-> E((休息))
    D -.no.-> C
    E --> F(吃饭)

标准流程图

定义模块 id=>关键字: 描述 (“描述”的前面必须有空格,“=>” 两端不能有空格)

  • 关键字:

    1. start 流程开始,以圆角矩形绘制
    2. opearation 操作,以直角矩形绘制
    3. condition 判断,以菱形绘制
    4. subroutine 子流程,以左右带空白框的矩形绘制
    5. inputoutput 输入输出,以平行四边形绘制
    6. end 流程结束,以圆角矩形绘制
  • 定义模块间的流向:

    1. 模块1 id->模块2 id :一般的箭头指向
    2. 条件模块id (描述)->模块id(direction) :条件模块跳转到对应的执行模块,并指定对应分支的布局方向

实例

```flow
st=>start: 开始
ipt=>inputoutput: 输入一个x
op=>operation: 处理加工x+1
cond=>condition: 溢出(是或否?)
sub=>subroutine: 子流程
io=>inputoutput: 输出x
ed=>end: 结束

st->ipt->op->cond
cond(yes)->io->ed
cond(no)->sub->io->ed

时序图

标准时序图

  • Title:标题 :指定时序图的标题
  • Note direction of 对象:描述 : 在对象的某一侧添加描述,direction 可以为 right/left/over对象 可以是多个对象,以 , 作为分隔符
  • participant 对象 :创建一个对象
  • loop...end :创建一个循环体
  • 对象A->对象B:描述 : 绘制A与B之间的对话,以实线连接
    • -> 实线实心箭头指向
    • --> 虚线实心箭头指向
    • ->> 实线小箭头指向
    • -->> 虚线小箭头指向
```mermaid
sequenceDiagram
Title:时序图示例
客户端->>服务端: 我想找你拿下数据 SYN
服务端-->>客户端: 我收到你的请求啦 ACK+SYN
客户端->>服务端: 我收到你的确认啦,我们开始通信吧 ACK
Note right of 服务端: 我是一个服务端
Note left of 客户端: 我是一个客户端
Note over 服务端,客户端: TCP 三次握手
participant 观察者
```

 

带样式时序图

基本语法同标准时序图,不同的是

  • 需要使用 mermaid 解析,并在开头使用关键字 sequenceDiagram 指明
  • 线段的样式遵循 mermaid 的解析方式
    • -> : 实线连接
    • --> :虚线连接
    • ->> :实线箭头指向
    • -->> :虚线箭头指向
```mermaid
%% 时序图例子,-> 直线,-->虚线,->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗?
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!
```

甘特图

  • 使用 mermaid 解析语言,在开头使用关键字 gantt 指明
  • deteFormat 格式 指明日期的显示格式
  • title 标题 设置图标的标题
  • section 描述 定义纵向上的一个环节
  • 定义步骤:每个步骤有两种状态 done(已完成)/ active(执行中)
    • 描述: 状态,id,开始日期,结束日期/持续时间
    • 描述: 状态[,id],after id2,持续时间
    • crit :可用于标记该步骤需要被修正,将高亮显示
    • 如果不指定具体的开始时间或在某个步骤之后,将默认依次顺序排列
```mermaid
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h
```

除此之外,Markdown还支持数学公式的插入,因为目前没有使用,没有整理

有兴趣的可以访问https://www.jianshu.com/p/e74eb43960a1,总结的很棒,以后也是学习数学公式的重点地址。

推荐的Markdown编辑器

在线网站(http://www.mdeditor.com/

开头已经说了,用的就是这个在线网站,可以点击访问,效果不错,支持导出,具体可以自己体会

Mou

Mou 是一款由国人开发的Markdown 编辑器,支持实时预览,但是仅支持 苹果操作系统,可以说是目前最好用的免费 Markdown 编辑器,对汉字兼容性非常好。提供语法高亮、在线预览、同步滚动、全屏模式,支持自定保存、自动匹配,允许自定义主题等等。支持 CSS,HTML 和 PDF 导出等功能。Mou是独立的软件。

更多介绍及下载:http://25.io/mou/

Typora

Typora是非常好用的markdown编辑器,它的设计理念很不一样,不同于左右两个窗口的编辑器,是真正的即时预览型编辑器。本人也一直在用。Typora的设计理念就是极致简洁,它将「写字」和「预览」这两件事情合并了。 如果要修改已经写好的markdown标记,可以点击视图切换到“源代码模式”。

Typora 同样支持 Windows、OS X 和 Linux多个操作系统,支持数学编辑,可与 Word 直接格式转换,可以进行多种文档格式转换。Typora 流畅度和反应速度很快,特别适合那些手速快的人。

Typora是独立的软件。更多介绍及下载:https://www.typora.io/

引用

Markdown中文网

简书——林木木road

菜鸟教程

如果觉得文章还不错的话,记得点个赞吧!

猜你喜欢

转载自blog.csdn.net/qq_44091773/article/details/108807703