美文网首页
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 自我学习教程

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