zoukankan      html  css  js  c++  java
  • 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. 记录生活的美好! ↩︎

  • 相关阅读:
    宿主机无法访问CentOS7上Jenkins服务的解决办法
    415. Add Strings
    367. Valid Perfect Square
    326. Power of Three
    258. Add Digits
    231. Power of Two
    204. Count Primes
    202. Happy Number
    172. Factorial Trailing Zeroes
    171. Excel Sheet Column Number
  • 原文地址:https://www.cnblogs.com/janbar/p/markdown.html
Copyright © 2011-2022 走看看