• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

Markdown指南

开发技术 开发技术 2周前 (10-16) 18次浏览

目录
  • Markdown简介
  • 标题
  • 段落
    • 段落换行
    • 段落缩进
  • 字体格式
  • 插入链接
    • 普通链接
    • 高级链接
  • 插入图片
  • 插入代码块
  • 插入表格
    • 基础用法
    • 对齐方式
  • 插入区块
    • 基础用法
    • 区块中使用列表
    • 列表中使用区块
  • 插入列表
    • 无序列表
    • 有序列表
    • 列表嵌套
  • 插入待办
  • 高级技巧
    • HTML 元素
    • 转义
    • 公式
    • 甘特图
    • UML 图
    • Mermaid流程图
    • Flowchart流程图
    • 类图
  • 脚注

Markdown简介

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。 可查看【百度百科】深入了解。也可以查阅【官方文档】进行学习。

标题

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

[toc]
# 这是 H1
## 这是 H2
### 这是 H3
#### 这是 H4
##### 这是 H5
###### 这是 H6

最多6级标题

段落

段落换行

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

段落缩进

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

字体格式

  • 斜体文本,*斜体文本*斜体文本
  • 粗体文本,**粗体文本**粗体文本
  • 粗斜体文本,***粗斜体文本***粗斜体文本
  • 分割线,一行中用三个以上的星号、减号、底线来建立一个分隔线。

  • 可以使用<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&gt;
<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] 已完成

    实际效果如下:
Markdown指南

高级技巧

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 times mathbf{V}_2 =  begin{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 times mathbf{V}_2 = begin{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()
}

脚注


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


程序员灯塔
转载请注明原文链接:https://www.wangt.cc/2020/10/markdown%e6%8c%87%e5%8d%97/
喜欢 (0)