Markdown语法汇总🔥

456 阅读6分钟

什么是 markdown ?

  • Markdown 是一种轻量级的标记语言,可通过文本编辑器应用程序将 Markdown 格式元素添加到纯文本文件;
  • markdown 文件最终一般是转化为 HTML 和 PDF 文件进行预览和传递;

为什么要使用 Markdown 而不是 WYSIWYG(所见即所得)编辑器(如:Microsoft Word 之类的应用程序)?

  • Markdown可以用于一切。人们使用它来创建网站,文档,便笺,书籍,演示文稿,电子邮件和技术文档。
  • Markdown是便携式的。指的是一般的应用程序都可以打开 Markdown 格式的文件(如:vsCode、Atom、sublimetext等代码开发工具),不像 Microsoft Word 等文字处理应用程序,Microsoft Word将文字内容锁定为专有文件格式;
  • Markdown 是独立于平台的,你可以在任何操作系统上创建 Markdown 格式的文件;
  • Markdown 运用广泛,像 GitHub 等知名网站都支持 Markdown;

尝试使用 Markdown

  • 使用线上编辑器 dillinger,线上编辑器方便,因为你不用下载任何东西。
  • 在本地文件系统中创建 .md(或 .markdown) 结尾的文件(如:readme.md),并用相关编辑器(推荐vscode。)打开进行 Markdown 语法尝试并预览。

Markdown 基础语法

注意:相比而言如果你更喜欢 HTML 标记,在 Markdown 中是可以使用 HTML 标签的。不妨去试试😎。

Markdown 标题

数字符号 # 的个数代表标题的级别(h1~h6级标题)

# 我是一级标题  相当于  <h1>我是一级标题</h1>
## 我是二级标题  相当于  <h2>我是二级标题</h2>
### 我是三级标题  相当于  <h3>我是三级标题</h3>
#### 我是四级标题  相当于  <h4>我是四级标题</h4>
##### 我是一级标题  相当于  <h5>我是五级标题</h5>
###### 我是六级标题  相当于  <h6>我是六级标题</h6>

标题级别一(#) 和 标题级别二(##) 的替代语法

注意:在文字下方加上任意数量的 = 号代表一级标题,在文字下边加上任意数量的 - 号代表二级标题

# 一级标题   相当于   一级标题
                     =======
## 二级标题  相当于   二级标题
                     ------

段落

相当于 p 标签。使用空白行分割一行或多行文本(一定要空一行不然不会形成段落)。

我是段落一

我是段落二

换行

相当于 br 标签,在第一行文字后面加上两个以上的空格再回车完成换行,直接点击回车是不行的。

我是第一行
我是第二行

粗体

相当于 strong 标签。需要加粗的文字加在两个星号或者下划线之间。

你是**吴彦祖**吗?           相当于 你是<strong>吴彦祖</strong>吗?
我喜欢使用 __VUE__ 框架    相当于 我喜欢使用<strong>VUE</strong>框架

斜体

相当于 em 标签。需要加粗的文字加在一个星号或者下划线之间。

你是*吴彦祖*吗?           相当于 你是<em>吴彦祖</em>吗?
我喜欢使用 _VUE_ 框架      相当于 我喜欢使用<em>VUE</em>框架

加粗和斜体

相当于 strong 和 em 标签的组合。需要加粗的文字加在三个星号或者下划线之间。

你是***吴彦祖****吗?           相当于 你是<strong><em>吴彦祖</em></strong>吗?
我喜欢使用 ___VUE___ 框架      相当于 我喜欢使用<strong><em>VUE</em></strong>框架

块引用

> 我是一段引用
> 我是引用

我是一段引用 我是引用

嵌套引用

> 好好学习,天天向上  
>> 书籍是人类进步的阶梯

好好学习,天天向上

书籍是人类进步的阶梯

块引用可以包含其他元素

> #### 你学过哪些前端框架?  
> + vue
> + react
> + angular

你学过哪些前端框架?

  • vue
  • react
  • angular

有序列表

注意:列表项需以数字(数字可以随机)加点号开头(如: 1. XXXXXX),但数字可以不随列表项递增而递增。相当于 ol 和 li 标签的组合。

1. 胡歌
2. 吴彦祖
3. 彭于晏  
以下也合理
1. vue
1. react
1. jquery
  1. 胡歌
  2. 吴彦祖
  3. 彭于晏
    以下也合理
  4. vue
  5. react
  6. jquery

无序列表

相当于 ul 和 li的组合。通过破折号(-),星号(*),加号(+)创建无序项

- html
- css
* react
* vue
+ javascript
+ typescript
  • html
  • css
  • react
  • vue
  • javascript
  • typescript

代码

相当于 code 标签

例:根据提示输入 `npm run start`
  • 例:根据提示输入 npm run start

水平线

三个及以上的星号(*)、破折号(---)、下划线(______)

*** 
--- 
___ 



链接

为关键字添加链接和鼠标悬浮标题。

[点击我去百度](http://baidu.com "我是标题-百度")

点击我去百度

网址和电子邮箱

<http://baidu.com>
<123456@qq.com>

baidu.com 123456@qq.com

图片

图片显示和设置标题

![表情包](./3.jpg "要人老命")

3.jpg

参考样式链接

给文本添加引用链接 效果相当于上面讲到的链接。引用样式链接包含两部分 用两个中括号表示 如:[vue][n]; 其中这个 n 相当于一个形参,它接收外部定义的变量 n;

好好学习[vue][2],😄
[2]: <https://vue3js.cn/docs/zh> 'vue3.js'

好好学习 vue

扩展语法

由于以上的基础语法不满足人们的需求,所以新增了许多所需的元素。

表格

  • 基础表格
| name | age |
| ---- | --- |
| jack | 18  |
nameage
jack18
  • 文本对齐方式
| title      | title2  |  title3   |
| :--------  |   ----: |    :----: |
| 左对齐      | 右对齐  |  居中对齐  |
titletitle2title3
左对齐右对齐居中对齐

代码块

  • 通过缩进四个空格或一个制表符创建代码块;
    var a = 996;
    var b = 666;
var a = 996;
var b = 666;
  • 使用三个刻度线(```)解决缩进创建代码块的不方便和结构不鲜明;或三个波浪线(~~~)
    ```
    我是三个刻度线包含的代码块
    ```
我是三个刻度线包含的代码块

代码块内语法高亮

在代码块内指定一种语言,不指定语言不会产生语法高亮

    ```json
    {
        "name":"vue",
        "dec":"一个框架"
    }
    ```
{
    "name":"vue",
    "dec":"一个框架"
}

脚注

为正文语法添加注释和参考。
1.使用 [^value]创建一个脚注,其中的 value 就相当于一个形参,对应跳转的链接;
2. 定义跳转的链接 ([^value]: 我是一个段解释)

    这是一段脚注,[^footnote] 哈哈哈哈
    [^footnote]: 我是一段脚注

这是一段脚注,1 哈哈哈哈

删除线

将需要删除的单词放入两个波浪线(~~)之中

~~我有钱~~,不,我很穷

我有钱,不,我很穷

复选框列表

(-)号加上中括号[] 代表一个复选框项,(x)代表选中;

- [x] 学习 JavaScript
- [ ] 学习 Vue
- [ ] 学习 React
  • 学习 JavaScript
  • 学习 Vue
  • 学习 React

网址链接

  • 默认将 url 转为链接(url 不加任何修饰)
http://baidu.com

baidu.com

  • 禁止 url 跳转(使用代码禁止)
`http://baidu.com`

http://baidu.com

Footnotes

  1. 我是一段脚注