• Markdown指南


    Markdown简介

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。
    可查看【百度百科】深入了解。也可以查阅【官方文档】进行学习。
    本博文的原文可以点击下载,然后复制到自己发布博客园Markdown文章,转载请注明本文地址。

    标题

        对于博客园文章,建议从"##"这种二级标题开始,看起来比较美观。在Markdown首行填写[toc]即可自动识别#号的标题作为目录

    [toc]
    # 这是 H1
    ## 这是 H2
    ### 这是 H3
    #### 这是 H4
    ##### 这是 H5
    ###### 这是 H6
    
    最多6级标题
    

    段落

    段落换行

    • 行尾添加两个以上空格加换行符实现。
    • 用一个空行简单的将两段落隔开。
    • 可以输入<br/>实现换行。

    段落缩进

    • &emsp;来表示一个全角空格。
    • &ensp;表示一个半角空格。
    • &nbsp;表示行中间的空格。

    字体格式

    • 斜体文本,*斜体文本*斜体文本;或者<i>斜体文本</i>斜体文本;或者<em>斜体文本</em>斜体文本
    • 粗体文本,**粗体文本**粗体文本。或者<b>粗体文本</b>粗体文本
    • 粗斜体文本,***粗斜体文本***粗斜体文本
    • 分割线,一行中用三个以上的星号、减号、底线来建立一个分隔线。

    • 可以使用<font color=#db3737 size=3>文字</font>来定义文字的大小和颜色。文字
    • 删除线,~~删除线~~删除线。或者用<s>删除线</s>删除线
    • 下划线,<u>下划线</u>下划线
    • 文本居中,<center>居中文本</center>
      居中文本
      。注意,在使用center后的文本独占一行。
    • 脚注,首先要定义脚注: "[^LABEL]: ",在引用处使用[^LABEL]即可[1]
    创建脚注格式类似这样 [^janbar]。
    
    [^janbar]: 记录生活的美好!
    

    插入链接

    普通链接

    链接使用方法如下:

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

        例如:

    这是一个链接 [点击跳转](https://www.cnblogs.com/janbar)

        效果如下:
    这是一个链接 点击跳转

        直接使用链接地址:

    <https://www.baidu.com>
    <address@example.com>

        效果如下:
    https://www.baidu.com
    address@example.com

    高级链接

        我们可以通过变量来设置一个链接,变量赋值在文档末尾进行:

    这个链接用 1 作为网址变量 [Google][1]
    这个链接用 janbar 作为网址变量 [Janbar][janbar]
    然后在文档的结尾为变量赋值(网址),记得文末加空行和前2个空格。
    .
    [1]: http://www.google.com/
    [janbar]: https://www.cnblogs.com/janbar

        效果如下:
    这个链接用 1 作为网址变量 Google
    这个链接用 janbar 作为网址变量 Janbar

    插入图片

    • 借助 Markdown 提供的 alt 标签实现:![alt 属性文本](图片地址 "可选标题" =30x30) 可选标题项可省略,最后的表达式可以限定图片大小。
    • 借助 html 提供的 <img> 标签实现: <img src="图片地址" width="50%"></img>,可以添加 img 标签支持的样式及属性。
    • 借助 html 提供的 <img> 标签和 <div> 标签实现图片居中。
    • 当然,你也可以像插入高级链接那样对图片网址使用变量,在文末放上链接就行。

    插入代码块

    • 行内插入某个函数或这一行代码,用"`"括起来即可。我一般也用这个当做着重符,重点突出某些文字。

    • 一整块代码,可以在每行代码前加4个空格或1个tab。注意:起止行要与其他部分加空行隔开。

      #include <stdio.h>
      int main(int argc,char *argv[])
      {
              return 0;
      }
      
    • 使用两行三个"`"把代码包括起来,带上代码语言,有些Markdown解释器会根据语言不同而进行不同的渲染。我一般都是用这个

    ```c
    #include <stdio.h> int main(int argc,char *argv[]) { return 0; } ```

    插入表格

    基础用法

        Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。语法格式如下:

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

        以上代码显示结果如下:

    表头 表头 表头
    单元格 单元格 单元格
    单元格 单元格 单元格

    对齐方式

    • -: 设置内容和标题栏居右对齐。
    • :- 设置内容和标题栏居左对齐。
    • :-: 设置内容和标题栏居中对齐。

        实例如下:

    | 左对齐 | 右对齐 | 居中对齐 |
    | :-----| ----: | :----: |
    | 单元格11111111111111 | 单元格222222222222222222 | 单元格33333333333333333 |
    | 单元格11111111111111 | 单元格222222222222222222 | 单元格33333333333333333 |
    

        效果如下:

    左对齐 右对齐 居中对齐
    单元格11111111111111 单元格222222222222222222 单元格33333333333333333
    单元格11111111111111 单元格222222222222222222 单元格33333333333333333

    插入区块

    基础用法

        如下格式用">"加空格实现。可以用多个嵌套区块。

    > 最外层
    > > 第一层嵌套
    > > > 第二层嵌套

        效果如下:

    最外层

    第一层嵌套

    第二层嵌套

    区块中使用列表

    > 区块中使用列表
    > 1. 第一项
    > 2. 第二项
    > + 第一项
    > + 第二项
    > + 第三项

        效果如下:

    区块中使用列表

    1. 第一项
    2. 第二项
    • 第一项
    • 第二项
    • 第三项

    列表中使用区块

    • 第一项
      > 技术大佬
      > 学的不仅是技术更是梦想
    • 第二项

        效果如下:

    • 第一项

      技术大佬
      学的不仅是技术更是梦想

    • 第二项

    插入列表

    无序列表

        无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记,这些标记后面要添加一个空格,然后再填写内容:

    * 第一项
    * 第二项
    * 第三项

    + 第一项
    + 第二项
    + 第三项

    - 第一项
    - 第二项
    - 第三项

        效果如下:

    • 第一项
    • 第二项
    • 第三项
    • 第一项
    • 第二项
    • 第三项
    • 第一项
    • 第二项
    • 第三项

    有序列表

        有序列表使用数字并加上 . 号来表示,如:

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

        效果如下:

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

    列表嵌套

        列表嵌套只需在子列表中的选项前面添加四个空格即可:

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

        效果如下:

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

    插入待办

        已经验证博客园的Markdown不支持如下待办样式。但是像GitHub上是可以使用如下样式的。

    - [ ] 未完成
    - [x] 已完成

        实际效果如下:

    高级技巧

    HTML 元素

    不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。
    目前支持的 HTML 元素有:<kbd> <b> <i> <em> <sup> <sub> <br>等 ,如:

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

        显示结果如下:
    使用 Ctrl+Alt+Del 重启电脑

    转义

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

    文本加粗
    ** 正常显示星号 **

        Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:

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

    公式

        当你需要在编辑器中插入数学公式时,可以使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式来实现。提交后,问答和文章页会根据需要加载 Mathjax 对数学公式进行渲染。如:

    $$
    mathbf{V}_1 	imes mathbf{V}_2 =  egin{vmatrix} 
    mathbf{i} & mathbf{j} & mathbf{k} \
    frac{partial X}{partial u} &  frac{partial Y}{partial u} & 0 \
    frac{partial X}{partial v} &  frac{partial Y}{partial v} & 0 \
    end{vmatrix}
    ${$tep1}{style{visibility:hidden}{(x+1)(x+1)}}
    $$
    

        效果如下:

    [mathbf{V}_1 imes mathbf{V}_2 = egin{vmatrix} mathbf{i} & mathbf{j} & mathbf{k} \ frac{partial X}{partial u} & frac{partial Y}{partial u} & 0 \ frac{partial X}{partial v} & frac{partial Y}{partial v} & 0 \ end{vmatrix} ${$tep1}{style{visibility:hidden}{(x+1)(x+1)}} ]

    甘特图

    ```mermaid
    gantt
    dateFormat YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    section 现有任务
    已完成 :done, des1, 2014-01-06,2014-01-08
    进行中 :active, des2, 2014-01-09, 3d
    计划中 : des3, after des2, 5d
    ```

        效果如下:

    gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section 现有任务 已完成 :done, des1, 2014-01-06,2014-01-08 进行中 :active, des2, 2014-01-09, 3d 计划中 : des3, after des2, 5d

    UML 图

    ```mermaid
    sequenceDiagram
    张三 ->> 李四: 你好!李四, 最近怎么样?
    李四-->>王五: 你最近怎么样,王五?
    李四--x 张三: 我很好,谢谢!
    李四-x 王五: 我很好,谢谢!
    Note right of 王五: 李四想了很长时间, 文字太长了
    不适合放在一行.

    李四-->>张三: 打量着王五...
    张三->>王五: 很好... 王五, 你怎么样?
    ```

        效果如下:

    sequenceDiagram 张三 ->> 李四: 你好!李四, 最近怎么样? 李四-->>王五: 你最近怎么样,王五? 李四--x 张三: 我很好,谢谢! 李四-x 王五: 我很好,谢谢! Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行. 李四-->>张三: 打量着王五... 张三->>王五: 很好... 王五, 你怎么样?

    Mermaid流程图

    ```mermaid
    graph LR
    A[长方形] -- 链接 --> B((圆))
    A --> C(圆角长方形)
    B --> D{菱形}
    C --> D
    ```

        效果如下:

    graph LR A[长方形] -- 链接 --> B((圆)) A --> C(圆角长方形) B --> D{菱形} C --> D

    Flowchart流程图

    ```mermaid
    flowchat
    st=>start: 开始
    e=>end: 结束
    op=>operation: 我的操作
    cond=>condition: 确认?

    st->op->cond
    cond(yes)->e
    cond(no)->op
    ```

        效果如下:

    flowchat st=>start: 开始 e=>end: 结束 op=>operation: 我的操作 cond=>condition: 确认? st->op->cond cond(yes)->e cond(no)->op

    类图

    ```mermaid
    classDiagram
    Class01 <|-- AveryLongClass : Cool
    <> Class01
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    class Class10 {
    >>service>>
    int id
    size()
    }
    ```

        效果如下:

    classDiagram Class01 <|-- AveryLongClass : Cool <<interface>> Class01 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla class Class10 { >>service>> int id size() }

    插入svg

    众所周知Markdown支持嵌入html元素,那么svg文本也是支持的,下面就嵌入一个圆形的svg图片。

    <div width="100%" style="overflow-x: auto;">
      <svg width="140" height="170">
        <title>SVG Sample</title>
        <desc>This is a sample to use SVG in markdown on the website cnblogs.</desc>
        <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
      </svg>
    </div>
    

        效果如下:

    SVG Sample This is a sample to use SVG in markdown on the website cnblogs.

    脚注


    1. 记录生活的美好! ↩︎

  • 相关阅读:
    js三种存储方式区别
    利用split方法计算字符串中出现字母最多的次数
    图片预加载的三个方法
    页面有大量图片,优化图片的加载方法
    USB通信协议——深入理解
    C/C++回调函数
    显卡工作原理
    include包含头文件的语句中,双引号和尖括号的区别是什么?
    华为2015校园招聘 上机试题
    位操作基础篇之位操作全面总结
  • 原文地址:https://www.cnblogs.com/janbar/p/markdown.html
Copyright © 2020-2023  润新知