如何用macdown写CSDN博客

markdown语法展示

这是我第一篇正式博客，由于总是记不住md的格式，就想着记录下来，以后方便自己查ORZ。需要注明的是这其中引用了一些CSDN官方的新手指南，但我现在还不太会加引用，以后会补上，或者将自己的理解写出来。

1.如何生成目录

@[TOC](目录的标题)

2.生成不同级别的标题

从h1~h6分别对应n个#，注意#和正文之间空一格,如:

># h1
>## h2
>### h3
>#### h4

h1

h2

h3

h4

3.强调

• 删除的写法：~~删除的写法~~
• 加粗：**加粗**
• 斜体：*斜体*

• 代码框： >代码框

• 代码段写法为```code ```注意`不是单引号，而是与波浪线在一个键上的符号，我也不知道是什么。
• 按钮的样式：#，写法为#
• 标记文本,写法为==标记文本==

//This is code
System.out.println();

4.列表

有序列表

直接阿拉伯数字 跟上 英文的. 然后空一格
代码：

 1. hello
 2. world

效果

1. hello
2. world

无序列表

直接* 然后空一格
代码：

 * hello
 * world

效果

• hello
• world

多层次列表

每一层之间用2个空格隔开
代码：

* 项目1
  * 项目1.1
* 项目2

效果：

• 项目1
  • 项目1.1
• 项目2

多选框列表表示

用-[]表示未选中，-[x]表示选中
代码：

- [ ] 计划任务
	- [x] 完成任务

• 计划任务
  • 完成任务

自定义列表

代码：

Markdown
:  Text-to-HTML conversion tool

Authors
:  John
:  Luke

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

5.超链接与图片

行内超链接写法：[显示的文字](链接地址)，图片写法![显示的文字](链接地址)。
标记超链接写法：[显示的文字](链接地址)，图片写法![显示的文字](链接地址)。
链接: link.
code:链接: [link](https://mp.csdn.net).

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:
code:![Alt](https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg#pic_center =30x30)

6.表格

一个简单的表格是这么创建的：
代码：

项目     | Value
-------- | -----
电脑  | $1600
手机  | $12
导管  | $1

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	'Isn't this fun?'	‘Isn’t this fun?’
Quotes	"Isn't this fun?"	“Isn’t this fun?”
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

7.上下标

下标：

用~下标内容~实现
如：
代码：

我是~下标~

我是_下标

上标：

用^上标内容^实现
如：
代码：

我是^上标^

我是^上标

8.如何创建一个注脚

用法为[^序号]，
然后[^序号]:注脚的解释
代码：

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

 [^2]: 注脚的解释

效果：

一个具有注脚的文本。¹

9.如何创建注释

效果为鼠标悬浮会出现解释性词语,写法为*[待解释词语]：解释
代码：
*[HTML]: 超文本标记语言
Markdown将文本转换为 HTML。

10.KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通过欧拉积分

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

你可以找到更多关于的信息 LaTeX 数学表达式here.

11.新的甘特图功能，丰富你的文章

Mon 06 Mon 13 Mon 20 已完成 进行中 计划一 计划二 现有任务 Adding GANTT diagram functionality to mermaid

• 关于 甘特图 语法，参考 这儿,

12.UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：:

张三 李四 王五 你好！李四, 最近怎么样? 你最近怎么样，王五？ 我很好，谢谢! 我很好，谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

这将产生一个流程图。:

链接

长方形

圆

圆角长方形

菱形

• 关于 Mermaid 语法，参考 这儿,

13.FLowchart流程图

我们依旧会支持flowchart的流程图：

Created with Raphaël 2.2.0 开始 我的操作 确认？ 结束 yes no

• 关于 Flowchart流程图 语法，参考 这儿.

---

1. 注脚的解释 ↩︎