Markdown 的基础使用

Markdown 是一个 Web 上使用的文本到 HTML 的转换工具，可以通过简单、易读易写的文本格式生成结构化的 HTML 文档。目前 github、Stackoverflow 等网站均支持这种格式.

官方文档

• Markdown 文件要以.md或者.markdown为后缀名

• Markdown 文件可以导出为 word,html,pdf,image…

• MarkdownPad2, Typora 是通用的 Markdown 编辑工具
• Markdown 支持和一些html标签一起使用

接下来描述一下常用的一些语法：

1. 标题样例

使用 # 来标记，# 与内容保留一个空格;可以选择性的闭合;
多一个#代表降一级（即字号小一级），总共有 6 级；分别对应h1 -h6：

标题样例:

# 这是一级标题
## 这是二级标题
...
###### 这是六级标题

题效果：

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题

这是六级标题

---

2. 字体样例

• 斜体

  斜体的内容需要使用一对下划线 _ 或者一对星号 * 进行包裹(部分编辑器会强制转换 _ 包裹);
  标签与内容之间不能有空格;如果内容中含有相关标签内容需要使用 \ 进行转义与编程语言相似;
  在.md文件中可以直接使用部分标签

  斜体样例： _斜体_ 或者 *斜体* 或者 <em>斜体</em>

  斜体效果： 斜体, 斜体, 斜体

• 加粗

  加粗的内容需要使用两个星号 ** 或者两个下划线 __ 进行包裹(部分编辑器会强制转换 ** 包裹)
  标签与内容之间不能有空格;如果内容中含有相关标签内容需要使用 \ 进行转义与编程语言相似;
  当页面加载时会被转成 html 中 <strong>标签

  粗体样例： **粗体** 或者 __粗体__ 或者 <strong>粗体</strong>

  粗体效果： 粗体, 粗体, 粗体

• 斜体加粗

  斜体加粗的内容需要使用两个星号和一个下划线 **_ 进行对称包裹;
  标签与内容之间不能有空格;如果内容中含有相关标签内容需要使用 \ 进行转义与编程语言相似;

  斜体加粗样例： **_斜体加粗_** 或者 ***斜体加粗*** 或者 ___斜体加粗___

  斜体加粗效果：斜体加粗, 斜体加粗, 斜体加粗

• 删除线

  增加删除线的内容需要使用两对波浪号 ~~ 进行包裹
  标签与内容之间不能有空格;如果内容中含有相关标签内容需要使用 \ 进行转义与编程语言相似;

  删除线样例：~~删除线~~

  删除线效果：删除线

• 下划线

  下划线是使用前端标签的方式

  下划线样例：<u>下划线</u>
  下划线效果：下划线

• 注解

  添加注解形式的文本

  注解文字样例：这里是一个 [^Markdown]:一种标记语言

  注解文字效果：

  这里是一个 ¹

---

3. 区块引用样例

区块引用，就是描述内容标记为一个模块;Markdown 标记区块引用是使用 > 的引用方式
区块里面可以嵌套使用其他的样式

区块应用样例：

> 1. 这是一段详细的描述...
> 2. 这是描述的内部的引用...
> > 这是描述的内部的引用...

效果如下：

1. 这是一段详细的描述…
2. 这是描述的内部的引用…

这是描述的内部的引用…

4. 分割线样例

一条浅灰色的实线，使用三个及以上数量的星号***或者三个及以上数量减号---或者三个及以上数量下划线___进行标识,部分编辑器强制变更为减号，依据当前位置上下文环境；注意该行内不能有其他的元素

例如：

    ***
    ---
    ___

效果如下：

---

5. 图片样例

图片加载至支持使用网络图片,使用![alt](image_url "title"),和超链接有些相似,相对超链接就是增加了一个 !进行标识;

注意: url与title之间不需要加,

图片样例：

![This is image](http://inews.gtimg.com/newsapp_match/0/359390627/0 "这是一张图片!")

图片效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UllGXp6C-1586745758669)(http://inews.gtimg.com/newsapp_match/0/359390627/0 “这是一张图片!”)]

6. 超链接样例

使用文字描述，支持点击进行跳转，使用 [desc](url "title"),或者直接给出(url)和图片有些相似;
当页面加载时会被转成 html 中 <a> 标签

注意: url与title之间不需要,

超链接样例:

[Typora官网](https://typora.io/ "Typora官网")
或者
<https://typora.io/>

超链接效果：

Typora 官网

https://typora.io/

7. 列表样例

• 有序列表样例

  有序列表：使用 1.,2.,3.,…,注意序号和内容之间需要空格分隔;

  有序列表样例：

  1. title
  2. font
  3. image
  

  有序列表效果：

  1. title
  2. font
  3. image

• 无序列表样例

  无序列表: +,-,*,…排下去，不需要排序，部分编辑器会自动强制，注意序号和内容之间需要空格分隔;

  无序列表样例:

  - 超链接
  * 代码
  - 逻辑条件
  

  无序列表效果：

  • 超链接
  • 代码
  • 逻辑条件

8. 代码样例

代码样式有两种:

单行代码和多行代码(两者的区别就是多行样式中区分间距和换行，保留代码块的样式，而单行则忽略);

• 单行代码：使用一对反向单引号 `` 包裹起来; 当页面加载时会被转成html中p` 标签;

`This is a example ......`

单行代码效果:

This is a example ......

• 多行代码：使用三对反向单引号```包裹起来;这种模式下支持多语言：c，java，php，js，python…几乎所有开发语言)

​```java     // 这里指定代码的语言
public static void main(String[] args){
    System.out.print("Hello world !")
}

多行代码效果：

public static void main(String[] args){
   System.out.print("Hello world !")
}

---

9. 表格

表格使用 | tab | tab | tab |...|声明表头字段；
表格使用 | :-- | :-: | --: |...|申明表单中对应列中的内容对其方式,冒号在左侧即左对齐，在右侧即右对齐，在两侧即居中；
表格使用 |value|value|value|...|插入数据；

表格样例：

| name   | age | gender | user_info                   |
| :----  | --: | :----: | :---------------------------|
| Jack   |  18 |   男   | 高高高 de 一批............... |
| Leo    |  10 |   女   | 富富富 de 一批............... |
| Suxan  |  28 |   男   | 帅帅帅 de 一批............... |

表格效果：

name	age	gender	user_info
Jack	18	男	高高高 de 一批…
Leo	10	女	富富富 de 一批…
Suxan	28	男	帅帅帅 de 一批…

10. 流程图

我擦，这个好强大…直接看例子： 不过 github 好像不支持显示

​```mermaid
flowchat
st=>start: 开始
op=>operation: My Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
&```

效果：

工具： 推荐使用typora,官网下载 下滑至"Download" module 选择对应的版本

块与嵌套：

Title

• This is title : A;

  content;

  1. content;
  2. content;

• This is title : B

  content;

  • content;

  • content;

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AeDekzmW-1586745758672)(https://tse1-mm.cn.bing.net/th?id=OIP.uUT5wt6VDHJ7zAFDru9IvQHaHa&w=156&h=160&c=8&rs=1&qlt=90&pid=3.1&rm=2)]

This is title : c

链接content;

---

1. ↩︎