Markdown快速入门

Markdown 快速入门

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

马上打开最好的在线 Markdown 编辑器dillinger，跟着下面的语法亲自来写一篇文档吧

语法

标题

# >##

使用 = 和 - 标记一级和二级标题

我展示的是一级标题
=

我展示的是二级标题
-

// 可以使用多个=或-
我展示的是一级标题
=======

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

// 推荐
# 一级标题
## 二级标题

段落&换行

两个空格

段落没有特殊格式，直接编写文字就好，段落的换行使用两个及以上空格加上回车

床前明月光  // 两个空格
疑是地上霜

加粗&斜体

* >** >***

斜体使用一个星号，粗体两个星号，粗体斜体三个星号

*斜体是前后各加一个星号*
**粗体是前后各加两个星号**
***粗斜体是前后各加三个星号***

斜体是前后各加一个星号
粗体是前后各加两个星号
粗斜体是前后各加三个星号

块引用

>

块引用使用右尖括号 >

>要创建blockquote，请>在段落前面添加一个。

>块引用可以包含多个段落。>在段落之间的空白行上添加一个。
>
>块引用可以包含多个段落。>在段落之间的空白行上添加一个。

要创建 blockquote，请>在段落前面添加一个。

块引用可以包含多个段落。>在段落之间的空白行上添加一个。

块引用可以包含多个段落。>在段落之间的空白行上添加一个。

块引用可以包含其他 Markdown 格式的元素

// 并非所有元素都可以使用-您需要进行实验以查看哪些元素有效。
> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

The quarterly results look great!

Revenue was off the chart.

Profits were higher than ever.

Everything is going according to plan.

有序列表&无序列表

1.
1.

- >-

有序列表使用数字和点（.）

下面三种写法效果相同

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

// 数字不必按顺序
1. 第一项
8. 第二项
3. 第三项
5. 第四项

// 推荐
1. 第一项
1. 第二项
1. 第三项
1. 第四项

第一项
第二项
第三项
第四项

列表嵌套

// 嵌套需要缩进
1. 第一项
1. 第二项
1. 第三项
    1. 缩进项
    1. 缩进项
1. 第四项

第一项
第二项
第三项
1. 缩进项
2. 缩进项
第四项

无序列表使用破折号（-），星号（*）或加号（+）

/* 下面三种效果相同 */

* First item
* Second item
* Third item

+ First item
+ Second item
+ Third item3

// 推荐
- First item
- Second item
- Third item

First item
Second item
Third item

代码

```javascript

将字符表示成代码，放入反引号`中即可

`console.log("hello-world")`;

console.log("hello-world")

代码块可以使用三个反引号、三个反引号+java 或三个反引号+javascript，也可以通过每行缩进至少 4 个空格

/* 三个反引号（`）之间不能有空格（这里故意在中间加了一个空格） */

` ``
<html>
    <head>
    </head>
</html>
` ``

```java
<html>
    <head>
    </head>
</html>
` ``

/* ```javascript - 推荐 */
```javascript
<html>
    <head>
    </head>
</html>
` ``

// 每行缩进至少4个空格
    <html>
        <head>
        </head>
    </html>

这几种块级代码的区别是代码有颜色区分，下面两个示例使用的是三个反引号+javascript 和三个反引号

<html>
  <head></head>
</html>

<html>
    <head>
    </head>
</html>

水平线

---

创建水平线，请在单独一行使用三个或更多的星号(*)、破折号(-)或下划线(_)

/* 所有渲染输出看起来都相同 */

--- // 推荐
----
***
****
___
____

水平线示例：

链接

[百度](htttps://www.baidu.com 'title')
<https:/ /www.baidu.com>
[博客园][1]

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

[百度1](https://www.baidu.com)

// 鼠标悬停链接时显示：添加标题
[百度2](https://www.baidu.com "添加标题")

<https://www.baidu.com>

<fake@example.com>

百度 1

百度 2

https://www.baidu.com

fake@example.com

强调链接，添加星号即可

*[百度](https://www.baidu.com/)*

百度

为了可读性，可以将链接提取成一个变量，放到文档其他地方

下面定义了 5 个链接，由于把链接提取了出去，所以看起来非常清晰

/* 第一部分使用两组[]进行格式化，第一组[]显示为链接的文本，第二组[]指向存储在文档其他位置的链接 */
这个链接用 1 作为网址变量 [博客园][1]
这个链接用 2 作为网址变量 [博客园][2]
// 第二组[]中的变量不区分大小写，可以包含字母、数字、空格或标点符号
// 链接3和4指向同一个链接
这个链接用 3 作为网址变量 [博客园][A]
这个链接用 4 作为网址变量 [博客园][a]
这个链接用 5 作为网址变量 [博客园][a1 ,]

/* 第二部分可以放在文档任何位置 */

// 下面示例几乎等效，除了第一个没有title
[1]: https://www.cnblogs.com/
[2]: https://www.cnblogs.com/ "博客园2"
[A]: https://www.cnblogs.com/ (博客园3)
[a1 ,]: <https://www.cnblogs.com/> (博客园5)

这个链接用 1 作为网址变量博客园
这个链接用 2 作为网址变量博客园
这个链接用 3 作为网址变量博客园
这个链接用 4 作为网址变量博客园
这个链接用 5 作为网址变量博客园

图片

![alt](url "标题")
![][img1]
[![][img1]][1]

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

![alt属性文本](https://d33w.../images/shiprock.jpg "可选标题")

alt属性文本

像链接那样使用变量 ![][img1] -推荐

链接图片

[![][img1]][1]

转义字符

\

用反斜杠\ 进行转义
\* 如果没有反斜杠，这将是无序列表中的项目符号。
* 如果没有反斜杠，这将是无序列表中的项目符号。

表格

header1|header2|header3
-|-|-
cnt1|cnt2|cnt3

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

|表头|表头头头头头头头|表头|
|-|-|-|
|内容|内容|内容容容容容容容容容|

// 可以省略两头的 -推荐 |
表头|表头头头头头头头|表头
-|-|-
内容|内容|内容容容容容容容容容

// 通过冒号（:）实现居中对齐或右对齐
|表头头头头头头头头|表头头头头头头头|表头|
|-|:-:|-:|
|默认左对齐|居中|右对齐|

表头	表头头头头头头头	表头
内容	内容	内容容容容容容容容容

表头	表头头头头头头头	表头
内容	内容	内容容容容容容容容容

表头头头头头头头头	表头头头头头头头	表头
默认左对齐	居中	右对齐

流程图

美人鱼（mermaid）能让我们使用代码创建图表和可视化效果。

```mermaid
graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F["fn(5)"]
` ``

注：(```)会被解析，所以故意添加一个空格

graph TD A[方形] --> B(圆角) B --> C{条件a} C --> |a=1| D[结果1] C --> |a=2| E[结果2] F["fn(5)"]

Tip：更多示例请查看 markdown 高级

结束语

我在 Visual Studio Code 中写好的 Markdown，放到 Typora(一款免费的 Markdown 编辑器，支持 OS X、Windows 和 Linux 三种操作系统)里面，显示会有一些差异，比如图片没有左对齐、链接图片点击不会跳转等等，需要微调。

参考

posted @ 2021-02-20 23:37 彭加李阅读(200) 评论(0) 编辑收藏举报

刷新页面返回顶部

彭加李

Markdown快速入门