为何要学习 Markdown?究竟有什么用?

为何要学习 Markdown?究竟有什么用?

做者:JackTian
微信公众号:杰哥的IT之旅(ID:Jake_Internet)javascript

1、什么是 Markdown?
Markdown 是一种轻量级标记语言,创始人是约翰·格鲁伯(John Gruber)。容许人们使用易读易写的纯文本格式编写文档,能够导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档,文档后缀为.md,.markdown。
据说Markdown是目前互联网上最流行的写做语言,它使用一些简单的符号# * / > [] ()\来标记文本格式,语法很是简单。除此以外,还有不少很是好看的格式可自行选择。php

2、为何学习 Markdown?
自从运营公众号起,刚开始那会,我都是经过公众号后台编辑的文章。这里确定有很多读者,不知道公众号后台是如何编辑文章的,给你们看下,具体见下图。css

为何要学习 Markdown?究竟有什么用?

公众号后台编辑文章时,不只输出的同时,还要调整字体大小、加粗、对齐、缩进等一系列的操做,刚开始推送出去的文章,排版总体以为不是很美观,后来,慢慢接触了业界的大佬们吸收了他们的经验,慢慢改善,逐步转向了markdown编辑器,排版格式也获得了读者们的承认。java

为何要学习 Markdown?究竟有什么用?

通过一段时间的研究后,Markdown 编辑器不只能够帮助公众号排版以外,还能够给其余文档进行排版,使其文章更有结构感,总体布局也更加好看。我相信你们,只要你喜欢记录和输出,Markdown 是一个很是值得学习和掌握的技能,良好的平台扩展性,专一于写做自己而不是格式。python

3、Markdown 编辑器工具
平台文章编辑器:简书、CSDN 等;windows

本地APP:MarkText、Typora、Notable、vnote 等;bash

Web APP:md2all、mdeditor 等;微信

4、Markdown 有哪些特色?
一键建立markdown

支持主流的语法运维

支持插入图片

支持多种模式切换

跨平台同步

演示模式

5、Markdown 的基本语法
Markdown 标题

使用#号可表示1-6级标题,一级标题对应一个#号,二级标题对应两个#号,以此类推。

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

为何要学习 Markdown?究竟有什么用?

字体

斜体文本:能够在须要标注为斜体文本前及斜体文本结尾,输入一个星号*或者一个下划线_

粗体文本:能够在须要标注为粗体文本前及粗体文本结尾,输入两个星号**或者两个下划线__

粗斜体文本:能够在须要标注为粗斜体文本前及粗斜体文本结尾,输入三个星号***或者三个下划线_

*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___

为何要学习 Markdown?究竟有什么用?

分隔线

在一行中用三个(以上)的星号、减号、底线来创建一个分隔线,该分隔线行内不能输出任何其余文本,也能够在星号或是减号中间插入空格。

***
* * *
*****
- - -

为何要学习 Markdown?究竟有什么用?

删除线

若是段落上的文字需添加删除线,在须要添加删除线的文字首部和尾部加上两个波浪线~~便可

这行文字已被删除
这行文字已被删除

下划线

若是段落上的文字需添加下划线,在须要添加下划线的文字首部和尾部加上<u>文本</u>便可

<u>这行文字已被添加下划线</u>
这行文字已被添加下划线

脚注

脚注是对文本的备注说明。

print ^Hello World

为何要学习 Markdown?究竟有什么用?

列表

Markdown 支持有序列表和无序列表。

无序列表使用星号(*)、加号(+)或是减号(-)做为列表标记;

有序列表使用数字并加上 . 号标记;

* 第一
+ 第二
- 第三
1.第四
2.第五
3.第六

为何要学习 Markdown?究竟有什么用?

列表嵌套

列表嵌套需在子列表中的选项中添加四个空格

1. 第一
    - 第一个列表嵌套
2. 第二
    - 第二个列表嵌套

第一

第一个列表嵌套

第二

第二个列表嵌套

引用

Markdown 引用需在段落开头使用>符号,后面紧跟一个空格符号,不加也可。

> 这是一个引用
> 做者:JackTian
> 微信公众号:杰哥的IT之旅(ID:Jake_Internet)

这是一个引用
做者:JackTian
微信公众号:杰哥的IT之旅(ID:Jake_Internet)

除上述引用外,还能够嵌套,一个>符号在第一层,两个>符号是第一层的嵌套,以此类推。

> 这是一个引用
> > 做者:JackTian
> > > 微信公众号:杰哥的IT之旅(ID:Jake_Internet)

这是一个引用

做者:JackTian

微信公众号:杰哥的IT之旅(ID:Jake_Internet)

引用中使用列表

> 引用列表
> * 这是一个引用
> - 做者:JackTian
> 1. 微信公众号:杰哥的IT之旅(ID:Jake_Internet)

引用列表

这是一个引用

做者:JackTian

微信公众号:杰哥的IT之旅(ID:Jake_Internet)

列表中使用引用

如要在列表中使用引用,须要在>号前添加四个空格的缩进。

- 列表中使用引用 1

    > 这是一个引用
    > 做者:JackTian
    > 微信公众号:杰哥的IT之旅(ID:Jake_Internet)

- 列表中使用引用2

列表中使用引用 1

这是一个引用
做者:JackTian
微信公众号:杰哥的IT之旅(ID:Jake_Internet)

列表中使用引用 2

代码

markdown对代码块的语法是开始和结束行都要添加:,其中 ` 为windows键盘左上角那个,要精确指定语言(如:java、cpp、css、xml、javascript、python、php、go、kotlin、lua、objectivec等等)时,在头部直接指定,如:java

#!/bin/bash
. /etc/init.d/functions
for var in {11..59};
do
ip=172.16.1.$var
ping -c2 $ip >/dev/null 2>&1
if [ $? = 0 ];then
action "$ip" /bin/true
else
action "$ip" /bin/false
fi
don

为何要学习 Markdown?究竟有什么用?

连接

连接语法格式:

连接名称

或者

<连接地址>
[Linux 环境下实战 Rsync 备份工具及配置 rsync+inotify 实时同步](https://mp.weixin.qq.com/s/P8XDrr7ROIXBYOZnLy45zA)

或者

<https://mp.weixin.qq.com/s/P8XDrr7ROIXBYOZnLy45zA>

为何要学习 Markdown?究竟有什么用?

除此以外,连接还能够用变量来代替。

这个连接用 Rsync 备份工具 做为网址变量 Linux 环境下实战 Rsync 备份工具及配置 rsync+inotify 实时同步

这个连接用 无人值守安装 做为网址变量 RHEL 6 下 DHCP+TFTP+FTP+PXE+Kickstart 实现无人值守安装

结尾变量地址以下:

为何要学习 Markdown?究竟有什么用?
语法格式:

图片描述
图片描述

为何要学习 Markdown?究竟有什么用?

除此以外,图片网址使用变量

这个连接用 WeChat 做为网址变量 WeChat。

变量赋值:

在 Markdown 编辑器是没法调整图片的高度与宽度的,如须要可以使用普通的<img>标签。

<img src="https://mmbiz.qpic.cn/mmbiz_png/nDMNE6lrvW5vhBgOCoUxyvxibYqeibicjWyFzjVIY8fEWVslGUcwPxicOggBCt0Os7ib7KYzqwNLS3sIAmGMxQRlibjg/0?wx_fmt=png" width="50%">

为何要学习 Markdown?究竟有什么用?

表格

制做表格使用|来分隔不一样的单元格,使用-来分隔表头和其余行。

表格语法格式:

|  表头   | 表头  |  表头  |
|  ----  | ----  | ----- |
| 单元格  | 单元格 | 单元格 |
| 单元格  | 单元格 | 单元格 |

注意:表格在公众号预览时,可能在 PC 端显示的不是正确的全屏,但在手机上预览时会正常显示为全屏。

为何要学习 Markdown?究竟有什么用?

若是你想调整表格的左对齐、右对齐、居中对齐,可按下述方式进行调整;

:-:将表头及单元格的内容左对齐;
-::将表头及单元格的内容左对齐;
:-::将表头及单元格的内容居中对齐;

|  表头1   | 表头2  |  表头3  |  表头4  |
|  :----  | :----: | :-----: | -----:|
| 单元格1  | 单元格2 | 单元格3 |  单元格4 |
| 单元格1  | 单元格2 | 单元格3 |  单元格4 |

为何要学习 Markdown?究竟有什么用?

支持 HTML 元素

目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>等;

不在 Markdown 涵盖范围以内的标签,可直接在文档里面用 HTML 撰写,经过md2all编辑器是没法显示使用<kbd>Ctrl</kbd>+<kbd>C</kbd>复制文本 HTML 元素的,这里你们能够结合mdeditor编辑器平台来实现。

使用 <kbd>Ctrl</kbd>+<kbd>C</kbd> 复制文本

为何要学习 Markdown?究竟有什么用?

转义

在 Markdown 编辑器里面使用了不少特殊符号来表示特定的意义,该特殊符号将再也不显示。那么若是须要想让这些特殊符号显示出来,则须要使用转义字符,Markdown 编辑器可以使用反斜杠来进行转义特殊字符便可;

转义特殊字符格式:

\*\* 转义特殊符号正常显示 \*\*

为何要学习 Markdown?究竟有什么用?

科学公式

当须要在 Markdown 编辑器中插入数学公式时,可使用两个美圆符$$包裹TeX或LaTeX格式的数学公式来实现。

$$E=mc^2$$

$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$

为何要学习 Markdown?究竟有什么用?

多行公式

为何要学习 Markdown?究竟有什么用?

横向流程图

在md2all编辑器是没法实现流程图的制做的,能够在有道云笔记PC端,新建一个md的文件,开启源代码模式进行编辑查看效果;

 
 

graph LR
A(总经理) --> B(技术部)
B --> C{开发/测试/运维}
C --> |开发部| D[开发者1]
C --> |测试部| E[测试者1]
C --> |运维部| F[运维者1]
G[横向流程图]

 
 

为何要学习 Markdown?究竟有什么用?

竖向流程图

 
 

graph TD
A(总经理) --> B(技术部)
B --> C{开发/测试/运维}
C --> D[开发者1]
C --> E[测试者1]
C --> F[运维者1]
G[竖向流程图]

 
 

为何要学习 Markdown?究竟有什么用?

标准流程图

```flow
st=>start: 用户登录
op=>operation: 登录操做
cond=>condition: 登录成功 Yes or No?
e=>end: 进入后台

st->op->cond
cond(yes)->e
cond(no)->op
![](https://s4.51cto.com/images/blog/202101/24/b448f225ab16f234aa25fe1cd548bfa7.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

标准流程图(横向)
st=>start: 用户登录
op=>operation: 登陆操做
cond=>condition: 登录成功(Yes or No?)
sub1=>subroutine: 从新登陆
io=>inputoutput: 开始操做后台
e=>end: 退出系统
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
![](https://s4.51cto.com/images/blog/202101/24/81ac7e0e2d74a12468e2c493b6141161.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

UML时序图
好友A->好友C: Hello,好友C!(请求)
Note left of 好友A: 一段有趣的对话
好友C-->好友A: Hi,好友A!(响应)
好友A->好友B: Good night!
好友B-->好友A: Good night!
好友C->好友B:  How are you?
好友B-->好友C: Fine,thank you!
![](https://s4.51cto.com/images/blog/202101/24/c30020cf243902df2855e320b9f71c3f.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

UML 复杂时序图
Title: 标题:这是一个复杂的 UML 时序图
好友A->好友C: Hello,好友C!(请求)
Note right of 好友C: 好友C的描述
Note left of 好友A: 好友A的描述(提示)
好友C-->好友A: Hi,好友A!(响应)
好友B->小三: 小三,你还好吗?
小三-->>好友A: 好友B,今天找我了,问我还好吗?
好友A->好友B: 那你怎么回复小三的呢?
Note over 小三,好友B: 很久不见,咱们仍是好朋友。
participant 好友D
Note right of 好友D: 竟然没人问我???
![](https://s4.51cto.com/images/blog/202101/24/f7b127403cf140abb9e87acba30de771.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

除了上面举例的横向流程图、竖向流程图、标准流程图、标准流程图(横向)、UML时序图、UML复杂时序图,还有UML标准时序图、甘特图等等。

**6、Markdown 能够在哪一个平台编写文章?**
在上面第三标题内简单介绍了几款平台文章编辑器、本地 APP、Web APP,结合我自身状况,如今用的是md2all编辑器来写文章,只需简单的一些特殊字符来完成便可,不会把总体的文章搞的花里胡哨的。

你们也能够根据本身的需求,选择适合本身的。这里也欢迎你们留言说说,你是经过什么 Markdown 编辑器工具来写文章的。

**7、怎么将 Markdown 编写的文章与公众号平台相结合?**
公众号编辑器是一个富文本编辑器,样式都比较基础,不支持直接用Markdown语法来编辑文本。

我我的是经过md2all编辑器编写好后,而后复制粘贴到公众号,全部的样式渲染地很完美,包括图片加载等等,且格式也不会变的很乱。

复制前的效果图:

![](https://s4.51cto.com/images/blog/202101/24/26a23fe2e5e25259684d417280d59413.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

复制到公众号编辑器后的效果图:

![](https://s4.51cto.com/images/blog/202101/24/1ef6edd6babb5890acdf6714c9127b03.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)