美文网首页
玩转 Markdown 所有特性

玩转 Markdown 所有特性

作者: 静默虚空 | 来源:发表于2020-02-01 16:28 被阅读0次

    :package: 本文已归档到:「blog

    目录

    标题

    Markdown 支持六个级别的标题。

    语法:
    # 一级标题
    ## 二级标题
    ### 三级标题
    #### 四级标题
    ##### 五级标题
    ###### 六级标题
    

    文本样式

    :bulb: 粗体、斜体、删除线可以混合使用。

    在 Markdown 中,粗体文本、斜体文本可以使用 *_ 符号标记。建议统一风格,始终只用一种符号。

    语法 效果
    普通文本 普通文本
    *斜体文本* _斜体文本_ 斜体文本 斜体文本
    **粗体文本** __粗体文本__ 粗体文本 粗体文本
    ~~删除文本~~ 删除文本
    ***粗斜体文本*** ___粗斜体文本___ 粗斜体文本 粗斜体文本

    列表

    无序列表

    • RED
    • YELLOW
    • BLUE

    有序列表

    1. 第一步
    2. 第二步
    3. 第三步

    任务列表

    • 完成任务
    • 计划任务

    多级列表

    • 数据结构
      • 线性表
        • 顺序表
        • 链表
          • 单链表
          • 双链表
        • 二叉树
          • 二叉平衡树

    分割线

    ***---___ 都可以作为分割线。




    链接

    普通链接

    语法:

    [我的博客](https://dunwu.github.io/blog/)
    
    • [] 中标记链接名。类似 HTML 中 <a> 元素的 title 属性。
    • () 中标记链接的 url,也支持相对路径(前提是资源可以访问)。类似 HTML 中 <a> 元素的 href 属性。

    效果:

    图片

    Markdown 引用图片的语法:

    ![alt](url title)
    

    alt 和 title 即对应 HTML 中 img 元素的 alt 和 title 属性(都可省略):

    • alt - 表示图片显示失败时的替换文本。

    • title - 表示鼠标悬停在图片时的显示文本(注意这里要加引号)

    • url - 即图片的 url 地址

    图片链接

    可以将图片和链接混合使用。

    锚点

    其实呢,每一个标题都是一个锚点,和 HTML 的锚点(#)类似,比如:回到顶部

    引用

    普通引用:

    :question: 什么是 Markdown

    Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯(英语:John Gruber)。它允许人们“使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档”。[4]这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。 —— 摘自 Wiki

    嵌套引用:

    数据结构

    二叉树

    平衡二叉树

    满二叉树

    代码高亮

    标签

    语法:

    `Markdown` `Doc`
    

    效果:

    Markdown, Doc

    代码块

    语法一:在文本前后都使用三个反引号进行标记。【✔️ 推荐】

    这是一个文本块。
    这是一个文本块。
    这是一个文本块。
    

    语法二:在连续几行的文本开头加入 1 个 Tab 或者 4 个空格。【❌ 不推荐】

    这是一个文本块。
    这是一个文本块。
    这是一个文本块。
    

    语法

    在三个反引号后面加上编程语言的名字,另起一行开始写代码,最后一行再加上三个反引号。

    public static void main(String[]args){} //Java
    
    int main(int argc, char *argv[]) //C
    
    echo "hello GitHub" #Bash
    
    document.getElementById('myH1').innerHTML = 'Welcome to my Homepage' //javascipt
    
    string &operator+(const string& A,const string& B) //cpp
    

    表格

    一般表格:

    表头 1 表头 2
    表格单元 表格单元
    表格单元 表格单元

    表格可以指定对齐方式:

    序号 商品 价格
    1 电脑 6000.0
    2 鼠标 100.0
    3 键盘 200.0

    Emoji 表情

    :bulb: 注意:部分 Markdown 引擎支持 Emoji。

    合理使用 Emoji 表情,往往可以使得文章内容更加丰富生动。例如::heavy_check_mark: :x: :bulb: :bell: :heavy_exclamation_mark: :question:

    更多 Emoji 表情请参考:

    注脚

    :bulb: 注意:部分 Markdown 引擎支持注脚。

    一个具有注脚的文本。[1]

    数学公式

    :bulb: 注意:部分 Markdown 引擎支持 Latex。

    很多文档中,需要引入一些数学符号、特殊符号,其排版问题比较头疼。这种问题,可以用 Latex 来解决,大部分 Markdown 引擎都支持 Latex。

    Latex 可以使用 $ 符号来标记 Latex 表达式,下面是一个数学公式示例:

    \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.

    列举一些常用数学符号:

    符号 语法 描述
    \leq $\leq$ 小于等于
    \geq $\geq$ 大于等于
    \neq $\neq$ 不等于
    \approx $\approx$ 约等于
    \infty $\infty$ 无穷
    \prod_{x}^{y} $\prod_{x}^{y}$ 累乘
    \sum_{i=0}^n $\sum_{i=0}^n$ 求和
    \int $\int$ 积分
    \iint $\iint$ 双重积分
    \log_x{y} $\log_x{y}$ 对数
    x^{y+1} $x^{y+1}$ 上标
    x_{y+1} $x_{y+1}$ 下标
    \frac{x}{y} $\frac{x}{y}$ 分数
    \sqrt[y]{x} $\sqrt[y]{x}$ 开方
    \sin $\sin$ 正弦
    \cos $\cos$ 余弦
    \tan $\tan$ 正切

    更多数学符号支持请参考:

    Diff

    :bulb: 注意:部分 Markdown 引擎支持 Diff。

    版本控制的系统中都少不了 diff 的功能,即展示一个文件内容的增加与删除。
    GFM 中可以显示的展示 diff 效果。可以用 + 开头表示新增,- 开头表示删除。

    + 新增内容
    - 删除内容
    

    UML 图

    💡 注意:部分 Markdown 引擎支持 mermaid

    mermaid 提供了多种 UML 图。详情请参考:mermaid 文档

    流程图

    graph LR
        A[Hard edge] -->|Link text| B(Round edge)
        B --> C{Decision}
        C -->|One| D[Result one]
        C -->|Two| E[Result two]
    

    时序图

    sequenceDiagram
        Alice->>Bob: Hello Bob, how are you?
        alt is sick
            Bob->>Alice: Not so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end
        opt Extra response
            Bob->>Alice: Thanks for asking
        end
    

    甘特图

    gantt
           dateFormat  YYYY-MM-DD
           title Adding GANTT diagram functionality to mermaid
    
           section A section
           Completed task            :done,    des1, 2014-01-06,2014-01-08
           Active task               :active,  des2, 2014-01-09, 3d
           Future task               :         des3, after des2, 5d
           Future task2              :         des4, after des3, 5d
    
           section Critical tasks
           Completed task in the critical line :crit, done, 2014-01-06,24h
           Implement parser and jison          :crit, done, after des1, 2d
           Create tests for parser             :crit, active, 3d
           Future task in critical line        :crit, 5d
           Create tests for renderer           :2d
           Add to mermaid                      :1d
    
           section Documentation
           Describe gantt syntax               :active, a1, after des1, 3d
           Add gantt diagram to demo page      :after a1  , 20h
           Add another diagram to demo page    :doc1, after a1  , 48h
    
           section Last section
           Describe gantt syntax               :after doc1, 3d
           Add gantt diagram to demo page      :20h
           Add another diagram to demo page    :48h
    

    HTML

    有些 Markdown 引擎支持在文档中嵌入的 html 元素。

    有些 Markdown 语法所不支持的特性,可以使用 html 元素来支持。

    折叠

    <details>
    <summary>折叠内容一</summary>
    <p>展开才能看到的内容</p>
    </details>
    <details>
    <summary>折叠内容二</summary>
    <p>展开才能看到的内容</p>
    </details>

    居中

    <div align="center"><p>居中显示的文本</p></div>

    图片尺寸

    <div align="center"><img width="100px" src="http://dunwu.test.upcdn.net/common/logo/zp.png" /></div>

    编辑器

    推荐 Markdown 编辑器

    • Typora - 个人认为是功能最强的 Markdown 编辑器。
    • Visual Studio Code - 可以通过安装插件,量身打造 Markdown 编辑器。
    • marktext - 一款简单优雅的 Markdown 编辑器。
    • StackEdit - 在线 Markdown 编辑器。
    • Editor.md - 在线 Markdown 编辑器。
    • Marxico - 一款专为印象笔记(Evernote)打造的 Markdown 编辑器。

    想了解更多 Markdown 编辑器可以参考:主流 Markdown 编辑器推荐

    参考资料


    1. 注脚的解释

    相关文章

      网友评论

          本文标题:玩转 Markdown 所有特性

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