美文网首页
Markdown 自我学习教程

Markdown 自我学习教程

作者: 绚雨蓝了个枫 | 来源:发表于2021-01-23 12:00 被阅读0次

前提

由于有的时候需要编写技术需求文档、使用文档、测试文档,又加上最近使用Markdown比较多,所以积累了一些经验。本人主要通过以下几个参考链接中学习了一部分,并总结了一点自己写的东西,与大家共同分享。同时由于在简书的Markdown文本编辑器中, 脚注、MathJax、流程图、时序图、甘特图、任务列表(Task lists)、HTML部分标签等等暂不支持,所以这部分Markdown语言的显示效果我用在其他软件上显示的结果图片来进行展示,各位如果想练习一下,可以在其他平台或者软件上使用,我这边使用更多的是Typora

Markdown 简介

Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。

Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。

Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。

Markdown 编写的文档后缀为 .md, .markdown

Markdown 标题

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

# 号后,记得空一格再加标题文本。

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

显示效果如下所示:


多级标题展示.png
  • 使用 = 和 - 标记一级和二级标题

首先输入标题文字,然后shift + enter 另起一行, 输入两个或两个以上 “ = / - ” ,示例语法格式如下:

我展示的是一级标题
=================

我展示的是二级标题
-----------------

显示效果如下所示:


一二级标题展示.png

Markdown 链接

链接使用方法如下:

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

或者

<链接地址>

显示效果如下所示:

链接名称包含测试连接:百度一下

直接使用链接地址:https://www.baidu.com

  • 高级链接

我们可以通过变量来设置一个链接,变量赋值在文档末尾进行:

这个链接用 10 作为网址变量 [Google][10]
然后在文档的结尾为变量赋值(网址)

[10]: http://www.google.com/

显示效果如下所示:

这个链接用 10 作为网址变量 Google
然后在文档的结尾为变量赋值(网址)

Markdown 列表

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

无序列表使用星号 (*) 、加号 (+) 或是减号 (-) 作为列表标记,这些标记后面要添加一个空格,然后再填写内容:

  * 第一项
  * 第二项
  * 第三项

  + 第一项
  + 第二项
  + 第三项


  - 第一项
  - 第二项
  - 第三项

显示效果如下所示:

  • 第一项
  • 第二项
  • 第三项
  • 第一项
  • 第二项
  • 第三项
  • 第一项
  • 第二项
  • 第三项

有序列表使用数字并加上 . 号来表示,如:

1. 第一项
2. 第二项
3. 第三项

显示效果如下所示:

  1. 第一项
  2. 第二项
  3. 第三项

列表嵌套

列表嵌套只需在子列表中的选项前面添加四个空格即可:

1. 第一项:
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项:
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素

显示效果如下所示:

  1. 第一项:
    • 第一项嵌套的第一个元素
    • 第一项嵌套的第二个元素
  2. 第二项:
    • 第二项嵌套的第一个元素
    • 第二项嵌套的第二个元素

Markdown 图片

Markdown 图片语法格式如下:

![属性文本](图片地址)
![属性文本](图片地址 "可选标题")
  • 开头一个感叹号 !
  • 接着一个方括号,里面放上图片的替代文字
  • 接着一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上选择性的 'title' 属性的文字。

显示效果如下所示:


气球

Markdown 还没有办法指定图片的高度与宽度,如果你需要的话,你可以使用普通的 <img> 标签。

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606320455463&di=cbb2b7ee092d955b8a2b576abd4b53d0&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F09%2F09%2F2157d2ba871765e.jpg" alt="气球" width="30%" />

显示效果如下所示:


使用img标签控制气球的大小.png

Markdown 区块引用

>这是区块引用示例

另外区块引用是可以嵌套的,一个 > 符号是最外层,两个 > 符号是第一层嵌套,以此类推:

“>”后无需加空格。

显示效果如下所示:

这是区块引用示例

最外层

第一层嵌套

第二层嵌套

Markdown 内联代码

`内联代码`

显示效果如下所示:

git clone

Markdown 下划线

<u>下划线</u>

显示效果如下所示:


下划线.png

Markdown 删除线

~~删除线~~

显示效果如下所示:

这是删除线

Markdown 分割线

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线。

***

* * *

*****

- - -

----------

---

显示效果如下所示:







Markdown 脚注

脚注是对文本的补充说明。

Markdown 脚注的格式如下:

[^要注明的文本]

显示效果如下所示:

今天天气怎么样 [1]

MarkDown 文本

1. 斜体文本

*斜体文本1*
_斜体文本2_

显示效果如下所示:
斜体文本1
斜体文本2

2. 加粗文本

**加粗文本** 或 __加粗文本__,加粗文本用两个*或两个_包围文本。
加粗斜体则用三个*或三个_包围文本。

例如:
**加粗字体1**
__加粗字体2__

***加粗斜体文本1***
___加粗斜体文本2___

显示效果如下所示:
加粗字体1
加粗字体2

加粗斜体文本1
加粗斜体文本2

3. 更改字体、大小、颜色

<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=red>我是红色</font>
<font color=#008000>我是绿色</font>
<font color=Blue>我是蓝色</font>
<font size=5>我是尺寸</font>
<font face="黑体" color=green size=5>我是黑体,绿色,尺寸为5</font>

显示效果如下所示:


字体的样式与大小与颜色.png

4. 为文本添加背景色

<table><tr><td bgcolor=green>背景色yellow</td></tr></table>

显示效果如下所示:


绿色背景.png

Markdown 表格

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

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

显示效果如下所示:

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

对齐方式

我们可以设置表格的对齐方式:

  • -: 设置内容和标题栏居右对齐。

  • :- 设置内容和标题栏居左对齐。

  • :-: 设置内容和标题栏居中对齐。

设置如下:

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

显示效果如下所示:

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

Markdown 上下标

上标:H<sub>2</sub>O
下标:x<sup>2</sup>

显示效果如下所示:
上标:H2O
下标:x2

Markdown 勾选框

- [x] task list 1
- [x] task list 2
- [x] task list 3
    - [ ] task list 3-1
    - [ ] task list 3-2
    - [ ] task list 3-3

显示效果如下所示:

勾选框.png

Markdown 转义

Markdown 使用了很多特殊符号来表示特定的意义,如果需要显示特定的符号则需要使用转义字符,Markdown 使用反斜杠转义特殊字符:

**正常显示星号** 
\*\* 正常显示星号 \*\*

显示效果如下所示:

正常显示星号
** 正常显示星号 **

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:

\   反斜线
`   反引号
*   星号
_   下划线
{}  花括号
[]  方括号
()  小括号
#   井字号
+   加号
-   减号
.   英文句点
!   感叹号

Markdown 支持的 HTML 元素

不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。

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

使用 <kbd>Command</kbd>+<kbd>C键</kbd> 将所选项拷贝到剪贴板

显示效果如下所示:


粘贴.png

Markdown 公式

当你需要在编辑器中插入数学公式时,可以使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式来实现。举例方程组公式,如下:

$$
\begin{cases}
a_1x+b_1y+c_1z=d_1\\
a_2x+b_2y+c_2z=d_2\\
a_3x+b_3y+c_3z=d_3\\
\end{cases}
$$
  • 方程组公式需要cases环境:起始、结束处以{cases}声明。
    显示效果如下所示:

\begin{cases} a_1x+b_1y+c_1z=d_1\\ a_2x+b_2y+c_2z=d_2\\ a_3x+b_3y+c_3z=d_3\\ \end{cases}

Markdown 画图

1. 流程图

\```mermaid
graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]
\```
  • 重要提示:上述"```mermaid":第一行内容与最后一行内容,表示当前使用的语言为mermaid。使用时请去掉 \ 反斜杠。
    显示效果如下所示:


    流程图.png

2. 时序图(顺序图)

\```sequence
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗?
\```
  • 重要提示:上述"```sequence":第一行内容与最后一行内容,表示当前使用的语言为sequence。使用时请去掉 \ 反斜杠。
    显示效果如下所示:


    时序图.png

3. 甘特图

\```mermaid
%% 语法示例
gantt  
       dateFormat  YYYY-MM-DD   
       title 使用mermaid语言定制甘特图

       section 普通任务
       已完成的任务                :done,    des1, 2021-01-06,2021-01-08
       正在进行的任务              :active,  des2, 2021-01-09, 3d
       待完成任务1                  :         des3, after des2, 5d
       待完成任务2                  :         des4, after des3, 5d

       section 关键任务
       已完成的关键任务           :crit, done, 2021-01-06,24h
       已完成的关键任务2          :crit, done, after des1, 2d
       正在进行的关键任务         :crit, active, 3d
       待完成的关键任务           :crit, 5d
       待完成任务                      :2d
       待完成任务2                     :1d

       section 文档编写
       描述甘特图语法               :active, a1, after des1, 3d
       完成甘特图实例1             :after a1  , 20h
       完成甘特图实例2            :doc1, after a1  , 48h
\```
  • 重要提示:上述"```mermaid":第一行内容与最后一行内容,表示当前使用的语言为mermaid。使用时请去掉 \ 反斜杠。
    显示效果如下所示:


    甘特图.png

Markdown 参考


  1. 天气晴朗!

相关文章

  • Markdown 自我学习教程

    前提 由于有的时候需要编写技术需求文档、使用文档、测试文档,又加上最近使用Markdown比较多,所以积累了一些经...

  • 2020-01-05

    Markdown 教程学习开始。

  • 应有的学习历程

    jupyter lab latex markdown markdown学习 python C#学习(菜鸟教程) 游...

  • Markdown学习笔记

    教程地址:Markdown教程 | 菜鸟教程 Markdown 介绍 Markdown 是一种轻量级标记语言,它允...

  • 2018-11-20

    Markdown 学习markdown时,练手抄的一篇教程.基本把语法过了一遍. 文章转载自简书 Markdown...

  • 2019-01-24

    怎么学习markdown? 刚开始 刚开始学习markdown一脸懵逼看完教程,又不是很懂编码吓死我了,image...

  • 重温 Markdown

    学习自菜鸟教程 https://www.runoob.com/markdown/md-tutorial.html ...

  • markdown学习笔记

    效果展示 建议自己按照视频中的写法动手试试,还是很简单的 markdown学习笔记效果 [markdown视频教程...

  • 常用编程语言入门学习

    Markdown 教程 JavaScript 教程 C 语言教程 C++ 教程 SVN 教程 Git 教程

  • 生信星球Day1学习 by是路小雨鸭

    简书Markdown功能学习 Markdown详细教程 该篇的主要内容包括如何: 1. 加入标题 2. 插入链接以...

网友评论

      本文标题:Markdown 自我学习教程

      本文链接:https://www.haomeiwen.com/subject/mmkezktx.html