Markdown语法
Markdown是一种轻量级标记语言,排版语法简洁,让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档,可与HTML混编,可导出HTML、PDF 以及本身的 .md 格式的文件。因简洁、高效、易读、易写,Markdown被大量使用,如Github、Wikipedia、简书等。
标题(Headings)
要创建标题,请在单词或短语前面添加井号 (#) 。井号的数量代表了标题的级别。例如,添加三个井号即创建一个三级标题 (<h3>) (例如:### My Header)。
Markdown | HTML | 渲染效果 |
---|---|---|
# Heading level 1 | <h1>Heading level 1</h1> | Heading level 1 |
## Heading level 2 | <h2>Heading level 2</h2> | Heading level 2 |
### Heading level 3 | <h3>Heading level 3</h3> | Heading level 3 |
#### Heading level 4 | <h4>Heading level 4</h4> | Heading level 4 |
##### Heading level 5 | <h5>Heading level 5</h5> | Heading level 5 |
###### Heading level 6 | <h6>Heading level 6</h6> | Heading level 6 |
段落(Paragraphs)
要创建段落,请使用空白行将一行或多行文本进行分隔。
Markdown | HTML | 渲染效果 |
---|---|---|
在Markdown中,段落的创建非常简单。只需输入文本,确保段落之间有空行即可。Markdown会自动处理换行和段落分隔 | <p>在Markdown中,段落的创建非常简单。只需输入文本,确保段落之间有空行即可。Markdown会自动处理换行和段落分隔</p> | 在Markdown中,段落的创建非常简单。只需输入文本,确保段落之间有空行即可。Markdown会自动处理换行和段落分隔 |
下面通过不同类型的段落展示Markdown的基本用法:
这是一个简短的段落,只有一行文字,简单明了。
Markdown is a lightweight markup language that makes it easy to write structured documents. It uses simple symbols to format text, such as using asterisks * or underscores _ for emphasis, and hashes # for headings. This simplicity allows writers to focus on their content without worrying about complex formatting rules. Markdown is used in many different fields, from blogging to technical documentation, and even for writing books.
Markdown is a flexible tool for writing in different languages. 例如,它同样适用于中文和其他语言的写作。无论是英文、中文,还是其他语言,Markdown都能为你提供一致的写作体验。这种多语言支持使得Markdown成为全球开发者和内容创作者的首选工具之一。
换行(Line Breaks)
在一行的末尾添加两个或多个空格,然后按回车键(return),即可创建一个换行(line break)或新行 (<br>)。
Markdown | HTML | 渲染效果 |
---|---|---|
这是第一行 这是第二行 | <p>这是第一行<br>这是第二行</p> | 这是第一行 这是第二行 |
为了兼容性,请在行尾添加“结尾空格”或 HTML 的<br>
标签来实现换行。
强调(Emphasis)
通过将文本设置为粗体或斜体来强调其重要性。
粗体(Bold)
要加粗文本,请在单词或短语的前后各添加两个星号(asterisks)或下划线(underscores)。如需加粗一个单词或短语的中间部分用以表示强调的话,请在要加粗部分的两侧各添加两个星号(asterisks)。
Markdown | HTML | 渲染效果 |
---|---|---|
文字设置成**粗体** | 文字设置成<strong>粗体</strong> | 文字设置成粗体 |
斜体(Italic)
要用斜体显示文本,请在单词或短语前后添加一个星号(asterisk)或下划线(underscore)。要斜体突出单词的中间部分,请在字母前后各添加一个星号,中间不要带空格。
Markdown | HTML | 渲染效果 |
---|---|---|
文字设置成*斜体* | 文字设置成<em>斜体</em> | 文字设置成斜体 |
粗体(Bold)和斜体(Italic)
要同时用粗体和斜体突出显示文本,请在单词或短语的前后各添加三个星号或下划线。要加粗并用斜体显示单词或短语的中间部分,请在要突出显示的部分前后各添加三个星号,中间不要带空格。
Markdown | HTML | 渲染效果 |
---|---|---|
文字设置成***粗体和斜体*** | ||
文字设置成<strong><em>粗体和斜体</em></strong> | 文字设置成粗体和斜体 |
删除线
要用斜体显示文本,请在单词或短语前后添加一个~
号
Markdown | HTML | 渲染效果 |
---|---|---|
文字被~删除~ | 文字被<del>删除</del> | 文字被 |
块引用(Blockquotes)
要创建块引用,请在段落前添加一个 > 符号。
> Dorothy followed her through many of the beautiful rooms in her castle.
渲染效果如下所示:
Dorothy followed her through many of the beautiful rooms in her castle.
超链接:https://wmwm.me
有序列表:
- item1
- item2
- item3
无序列表
- item1
- item2
- item3
Blockquotes can also be nested...
...by using additional greater-than signs right next to each other...
列表(Lists)
你可以将多个条目组织成有序或无序列表。
有序列表
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Integer molestie lorem at massa
Consectetur
adipiscing elit- 这是有序列表,随便填充一点内容,预览一下效果
- 这是有序列表,随便填充一点内容,
预览
一下效果 这是有序列表,随便填充一点内容,预览一下效果- 多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容多行内容
- Integer molestie lorem at massa
- You can use sequential numbers...
- ...or keep all the numbers as
1.
- You can use sequential numbers...
- You can use sequential numbers...
- You can use sequential numbers...
- You can use sequential numbers...
- You can use sequential numbers...
- You can use sequential numbers...
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- You can use sequential numbers...
- ...or keep all the numbers as
1.
- You can use sequential numbers...
- You can use sequential numbers...
无序列表
- Create a list by starting a line with
+
,-
, or*
- Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
-
Ac tristique libero volutpat at
-
Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
-
- Marker character change forces new list start:
- Very easy!
混合列表
无序➕有序➕无序
- Create a list by starting a line with
+
,-
, or*
- Lorem ipsum dolor sit amet
-
Ac tristique libero volutpat at
-
Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
-
- Integer molestie lorem at massa
- Integer molestie lorem at massa
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Lorem ipsum dolor sit amet
- Sub-lists are made by indenting 2 spaces:
- Very easy!
有序➕无序➕有序
- Create a list by starting a line with
+
,-
, or*
- Lorem ipsum dolor sit amet
- Ac tristique libero volutpat at
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Integer molestie lorem at massa
- Integer molestie lorem at massa
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Lorem ipsum dolor sit amet
- Sub-lists are made by indenting 2 spaces:
- Very easy!
复选框(CheckBox)
- 验证码弹窗的背景是黑色,要改成light
- 登陆和退出登录后,要把redux中的全局变量置空
- 要给页面设置viewport scale,否在输入评论时会导致页面缩放
- 文章编辑页面,blurhash增加一个loading效
- 头像更换以后页面没有更新新头像
- 元素的hover效果在手机上异常,要调整hover媒体查询
- 超过3M的头像为什么能上传成功?其他格式为什么能上传成功
- 右上角的头像和个人信息页面的头像好像被压缩了
代码
内联代码(Inline Code)
Markdown | HTML | 渲染效果 |
---|---|---|
内联代码`console.log()` | 内联代码<code>console.log()</code> | 内联代码console.log() |
块代码(Code Blocks),用三个```
反引号
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
分隔线(Horizontal Rules)
要创建分隔线,请在单独一行上使用三个或多个星号 (***)、破折号 (---) 或下划线 (___) ,并且不能包含其他内容。
***
---
_________________
效果预览
超链接(Links)
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
图片(Images)
要添加图片的话,首先请添加感叹号(!),然后紧跟着是方括号,方括号中可添加备用文本(alt text,即图片显示失败后显示此文本),最后跟着圆括号,圆括号中添加图片资源的路径或 URL。你可以选择在圆括号中的路径或 URL 之后添加标题(即 title 属性)。

长图
宽图
带链接的图片
要为图片添加链接,请先为图片的 Markdown 标记添加一个方括号,然后紧跟着一个圆括号,并在圆括号中添加链接地址。
[](https://markdown.com.cn)
表格(Tables)
要添加表,请使用三个或多个连字符(---)创建每列的标题,并使用管道(|)分隔每列。您可以选择在表的任一端添加管道。
| Syntax | Description |
|-----------|-------------|
| Header | Title |
| Paragraph | Text |
呈现的输出如下所示:
Syntax | Description |
---|---|
Header | Title |
Paragraph | Text |
单元格宽度可以变化,如下所示。呈现的输出将看起来相同。
| Syntax | Description |
| --- | ----------- |
| Header | Title |
| Paragraph | Text |
Tip: 使用连字符和管道创建表可能很麻烦。为了加快该过程,请尝试使用Markdown Tables Generator 。使用图形界面构建表,然后将生成的Markdown格式的文本复制到文件中。
对齐
您可以通过在标题行中的连字符的左侧,右侧或两侧添加冒号(:),将列中的文本对齐到左侧,右侧或中心。
| Syntax | Description | Test Text |
|:----------|:-----------:|------------:|
| Header | Title | Here's this |
| Paragraph | Text | And more |
呈现的输出如下所示:
Syntax | Description | Test Text |
---|---|---|
Header | Title | Here's this |
Paragraph | Text | And more |
格式化表格中的文字
您可以在表格中设置文本格式。例如,您可以添加链接,代码(仅反引号(`)中的单词或短语,而不是代码块)和强调。
您不能添加标题,块引用,列表,水平规则,图像或HTML标签。
在表中转义管道字符
您可以使用表格的HTML字符代码|
在表中显示竖线|
字符。