Markdown入门教程

作者: 氵焱焱 | 来源:发表于2021-06-12 19:05 被阅读0次

封面 id=80003805

Markdown简介

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
由于Markdown的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。
对于程序员来讲，使用Markdown做笔记比使用.txt和word要方便很多！

编辑器

本教程使用Typora讲解Markdown的基本语法，这是一个跨平台的编辑器，支持windows、MasOS和Linux操作系统，导出支持HTML、PDF、Word、图片等类型的文件。
可以在Typora官网上下载此编辑器 Typora官网

添加扩展语法

在官网上下载安装完Typora后，进入设置添加扩展语法，
方法如下：

在文件中点击偏好设置

在Markdown里把扩展语法全部勾上

随后，我们就能使用Markdown的扩展语法了。

Markdown教程

1. 标题

使用“#”标记

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

效果如下：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

2. 字体

可以使用如下字体：

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

效果如下：
斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本

3. 列表

无序表

使用*或+或-减号作为列表标记

* one
* two
* three

+ 1
+ 2
+ 3

- 一
- 二
- 三

效果如下：

有序表

使用数字加 . 即可，如：

1. 1
2. 2
3. 3

效果如下：

列表嵌套

在子列表前面加四个空格或者两个Tab即可

*  a
    1. b
    2. c
    3. d
* e
    1. f
    2. g

效果如下：

a
1. b
2. c
3. d
e
1. f
2. g

4. 区块

一个单独的区块

在开头使用>即可，如：

> 区
> 块

效果如下：

区
块

区块嵌套

区块也可以像列表那样可以嵌套一个>最外层，两个>则是第二层，如：

> 区
> >块
>>>嵌
>>>>套

区

块

嵌

套

区块与列表的混用

在区块中是可以使用列表的，如:

> 姓名：
> 学号：
> 成绩：
>   * 数学
>   * 语文
>   * 英语
> 日期

效果如下：

姓名：
学号：
成绩：

数学

语文

英语
日期

当然，在列表中也能使用区块：

* 姓名：
* 学号：
* 成绩：
>   * 数学
>   * 语文
>   * 英语
* 日期：

效果如下：

姓名：
学号：
成绩：

数学

语文

英语

日期：

5. 代码块

可以在代码开头前用```加语言名的方式增加代码块，再用```标记代码的结束，如：

```C
int main(void)
{
  return 0;
}```

效果如下：

int main(void)
{
  return 0;
}

6. 链接

使用如下两种方式添加链接：

[链接名称](链接地址)
<链接地址>

使用简书举例：

[简书](https://www.jianshu.com/)
<https://www.jianshu.com/>

效果如下：
简书
 https://www.jianshu.com/

7. 图片

使用如下方式添加图片：

![alt 属性文本](图片地址 "可选标题")

举例：

![id=67013895](https://img.haomeiwen.com/i26493533/f1acd5ec0ad5321f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

效果如下：

id=67013895

Markdown 还没有办法指定图片的高度与宽度，如果你需要的话，你可以使用普通的 <img> 标签。，如：
<img src="https://img.haomeiwen.com/i26493533/f1acd5ec0ad5321f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width="50%">

8. 表格

表格的制作

Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。
举例：

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

我们能得到：

表头	表头
单元格	单元格
单元格	单元格

表格的对齐方式

我们可以设置表格的对齐方式：
-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。
实例如下：

| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

左对齐	右对齐	居中对齐
单元格	单元格	单元格
单元格	单元格	单元格

9.其他的一些语法

（部分语法属于扩展语法，简书可能会不支持，所以部分效果无法展示）

高亮

在需要重点标注的词句两侧加上==

我滴好兄弟，你可真==聪明==啊！

我滴好兄弟，你可真==聪明==啊！

下标

下标的词句两侧加上~

H~2~O

H₂O

上标

上标的词句两侧加上^

y = e^x+1^

y = e^x+1

转义

如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：

**文本加粗** 
\*\* 正常显示星号 \*\*

文本加粗
** 正常显示星号 **

公式

当你需要在编辑器中插入数学公式时，可以使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式来实现。提交后，问答和文章页会根据需要加载 Mathjax 对数学公式进行渲染。如

$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix} 
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
${$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$

结果为：
$\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix} ${$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}$

typora 画流程图、时序图(顺序图)、甘特图

复制以下代码使用 typora 的源码模式粘贴到编辑器中查看效果：

源代码模式进入方法

以下几个实例效果图如下：

1、横向流程图源码格式：

graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]

2、竖向流程图源码格式：

graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]

3、标准流程图源码格式：

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

4、标准流程图源码格式（横向）：

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op

5、UML时序图源码样例：

对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？

6、UML时序图源码复杂样例：

Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

7、UML标准时序图样例：

%% 时序图例子,-> 直线，-->虚线，->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!

8、甘特图样例：

%% 语法示例
        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

参考资料

参考网站：
1. https://www.runoob.com/markdown/
2. https://baike.baidu.com/item/markdown/3245829
封面与图片的示例图片均来自Pixiv，图片id已标注。

Markdown入门教程

Markdown简介

编辑器

添加扩展语法

Markdown教程

1. 标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

2. 字体

3. 列表

无序表

有序表

列表嵌套

4. 区块

一个单独的区块

区块嵌套

区块与列表的混用

5. 代码块

6. 链接

7. 图片

8. 表格

表格的制作

表格的对齐方式

9.其他的一些语法

高亮

下标

上标

转义

公式

typora 画流程图、时序图(顺序图)、甘特图

参考资料

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Markdown