Skip to content

简介

logo

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

一、应用

当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如:GitHub、简书、知乎等

编辑器

推荐使用Typora,官网:https://typora.io/

二、徽章

什么是徽章

徽章是一种小巧精美的小图标,一般配有相关文字进行辅助说明,可对数据进行监控,链接跳转等,富有表现力。

常见于github项目主页,但其不仅出现于 github 项目主页,凡是能够表现图片的地方都可以出现徽章。

徽章的使用

  • markdown中使用
    格式:
    [![图片文字说明](图片源地址)](超链接地址)  # 即超链接内部嵌套图片
    
    语法:
    [![github](https://img.shields.io/badge/github-xugaoyi-brightgreen.svg)](https://github.com/xugaoyi)
    格式:
    [![图片文字说明](图片源地址)](超链接地址)  # 即超链接内部嵌套图片
    
    语法:
    [![github](https://img.shields.io/badge/github-xugaoyi-brightgreen.svg)](https://github.com/xugaoyi)

github

徽章生成网站:https://shields.io/

本文档主要介绍markdown,不对徽章做过多介绍,详细介绍请 戳我 了解。

三、设置目录

设置之后会根据分级标题来自动生成目录。

[TOC]
[TOC]

注:github暂未支持。

[TOC]

在github生成TOC的方法:https://github.com/ekalinin/github-markdown-toc

windows系统需要基于golang实现的工具:https://github.com/ekalinin/github-markdown-toc.go

如果你有GO语言的编译环境,可以尝试自己编译,如果没有,可以直接下载编译好的二进制文件。

如windows系统64位 下载:gh-md-toc.windows.amd64.tgz (386 是32位,amd64是64位)

下载解压后,发现没有后缀名无法识别,实际上这是个exe文件,所以只需要暴力地在后面加上.exe就可以开始愉快使用了。

使用方法:

  1. 首先将.md文档复制到gh-md-toc.exe的根目录下
  2. 在该目录下打开系统命令行,输入命令:gh-md-toc.exe README.MD 生成目录
  3. 把生成的目录复制到.md文件即可。

四、标题

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

五、文本

段落

Markdown 段落没有特殊的格式,直接编写文字,需要段落缩进时使用2个Tab

字体

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

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

    ***
    
    *****
    
    - - - -
    ***
    
    *****
    
    - - - -

脚注

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

    [^变量]
    在文档结尾或其他位置給变量赋值:
    [^变量]: 注明框内显示的内容
    
    鼠标移到这里> [^哈喽]
    [^哈喽]: 注明框内显示的内容
    [^变量]
    在文档结尾或其他位置給变量赋值:
    [^变量]: 注明框内显示的内容
    
    鼠标移到这里> [^哈喽]
    [^哈喽]: 注明框内显示的内容

注:在部分线上预览未支持

六、列表

无序列表

使用星号*、加号+或是减号-作为列表标记:

    * 第一项
    * 第二项
    
    + 第一项
    + 第二项
    
    - 第一项
    - 第二项
    * 第一项
    * 第二项
    
    + 第一项
    + 第二项
    
    - 第一项
    - 第二项
  • 第一项
  • 第二项

有序列表

使用数字并加上. 号来表示

    1. 第一项
    2. 第二项
    1. 第一项
    2. 第二项
  1. 第一项
  2. 第二项

折叠列表

    <details>
    <summary>点我打开关闭折叠</summary>
     折叠内容
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
    </details>
    <details>
    <summary>点我打开关闭折叠</summary>
     折叠内容
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
    </details>

带复选框列表

* [x] 第一项
* [ ] 第二项
* [ ] 第三项
* [x] 第一项
* [ ] 第二项
* [ ] 第三项

注:在部分线上预览未支持

  • [x] 第一项

  • [ ] 第二项

  • [ ] 第三项

列表嵌套

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

七、区块引用

区块引用是在段落开头使用 >符号 ,然后后面紧跟一个空格符号:

    > 区块引用
    > 区块引用

区块引用

Typora中回车键自动延伸区块

区块嵌套

    > 第一层
    > > 第二层
    > > > 第三层
    > 第一层
    > > 第二层
    > > > 第三层

第一层

第二层

第三层

区块中使用列表

    > 区块中使用列表
    > 1. 第一项
    > 2. 第二项
    > * 111
    > * 222
    > 区块中使用列表
    > 1. 第一项
    > 2. 第二项
    > * 111
    > * 222

区块中使用列表

  1. 第一项
  2. 第二项
    • 111
    • 222

列表中使用区块

    * 第一项
        > 区块
    * 第二项
    * 第一项
        > 区块
    * 第二项
  • 第一项

    区块

    区块

  • 第二项

八、代码

如果是段落上的一个代码片段可以用反引号把它包起来(`),示例:

    `alert()`
    `alert()`

alert()

代码区块

用三个反引号 ``` 包裹一段代码,并指定一种语言(也可以不指定),指定代码语言后会有代码的颜色高亮

本代码区块为示例说明:

    ```javascript
    function test() {
    	alert('test')
    }
    ```
    ```javascript
    function test() {
    	alert('test')
    }
    ```

效果:

javascript
function test() {
  alert('test')
}
function test() {
  alert('test')
}

九、链接

格式:

    [链接名称](链接地址)
    
    [链接名称](链接地址,可选的alt)
    

    
    <链接地址>
    [链接名称](链接地址)
    
    [链接名称](链接地址,可选的alt)
    

    
    <链接地址>

示例:

[百度](http://www.baidu.com,'百度')
[百度](http://www.baidu.com,'百度')

百度

直接显示链接地址:

<http://www.baidu.com>
<http://www.baidu.com>

http://www.baidu.com

变量链接

链接可以用变量来代替,文档末尾或其他位置附带变量地址:

    这个链接用 1 作为网址变量 [Google][1]
    这个链接用 baidu 作为网址变量 [Baidu][baidu]
    
    然后在文档的结尾或其他位置给变量赋值(网址)
      [1]: http://www.google.com/
      [baidu]: http://www.baidu.com/
    这个链接用 1 作为网址变量 [Google][1]
    这个链接用 baidu 作为网址变量 [Baidu][baidu]
    
    然后在文档的结尾或其他位置给变量赋值(网址)
      [1]: http://www.google.com/
      [baidu]: http://www.baidu.com/

这个链接用 1 作为网址变量 Google

这个链接用 baidu 作为网址变量 Baidu

Github仓库中使用内部链接

    可使用相对路径(前提是有该路径下的文件)
    [test](test.md)
    可使用相对路径(前提是有该路径下的文件)
    [test](test.md)

锚点链接

本文件中每一个标题都是一个锚点,和HTML的锚点(#)类似

    [Markdown](#Markdown)
    [Markdown](#Markdown)

注: github对含有标点符号的标题进行锚点时会忽略掉标点符号, 本页中,如果这样写则无法跳转:[链接](#九、链接) 正确写法:[链接](#九链接)

Markdown

链接

流程图

十、图片

和链接的区别是前面多一个感叹号!

    ![图片名](图片链接)
    ![图片名](图片链接)

当然,你也可以像链接那样对图片地址使用变量:

   这里链接用 img 作为图片地址变量
    然后在文档的结尾或其他位置给变量赋值(图片地址)
    ![RUNOOB][img]
    [img]: https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/md_logo.png
   这里链接用 img 作为图片地址变量
    然后在文档的结尾或其他位置给变量赋值(图片地址)
    ![RUNOOB][img]
    [img]: https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/md_logo.png

RUNOOB

图片宽高

如下想设置图片宽高,可以使用 <img> 标签。

    <img src="https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/md_logo.png" width="50px" height="30px">
    <img src="https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/md_logo.png" width="50px" height="30px">

相对路径以及Github中使用图片

不管是在本地还是在github同一个仓库中,如果图片存在,可以使用相对路径

相对路径图片:

    ![头像图片](./md-img/test.jpg)
    ![头像图片](./md-img/test.jpg)

github上如果引用其他github仓库中的图片则要注意地址格式:仓库地址/raw/分支名/图片路径https://raw.githubusercontent.com/用户名/仓库名/分支名/图片路径

    ![其他仓库的图片1](https://github.com/xugaoyi/vue-music/raw/master/src/common/image/default.png)

    ![其他仓库的图片2](https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/md_logo.png)
    ![其他仓库的图片1](https://github.com/xugaoyi/vue-music/raw/master/src/common/image/default.png)

    ![其他仓库的图片2](https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/md_logo.png)

十一、表格

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

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

对齐方式

  • -: 设置内容和标题栏居右对齐
  • :- 设置内容和标题栏居左对齐
  • :-: 设置内容和标题栏居中对齐
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
左对齐右对齐居中对齐
单元格单元格单元格
单元格单元格单元格

十二、Emoji表情包

Emoji表情英文名的前后加冒号,Typore上先输入冒号再输入首字母有表情提示

 :smirk:
 :smirk:

💋 😸🙈🐴 😏😊😃😄 ☀️

更多表情名称请查看:表情包清单

十三、其他技巧

支持的 HTML 元素

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

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

使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

使用 Ctrl+Alt+Del 重启电脑

转义

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

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