markdown的使用
- 什么是Markdown?
- Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。
- Markdown 语言在 2004 由 John Gruber创建。
- Markdown 编写的文档后缀为
.md
- 怎么学习Markdown?
# 标题语法
要创建标题,请在单词或短语前面添加井号
#
,#
的数量代表了标题的级别
## 二级标题
### 三级标题
...
2
3
# 段落语法
要创建段落,请使用空白行将一行或多行文本进行分隔。
示例:
先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。
然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。
诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。
2
3
4
5
效果:
先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。
然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。
诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。
# 换行语法
在一行的末尾添加两个或多个空格,然后按回车键,即可创建一个换行。 示例:
先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。` `
然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。` `
诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。` `
2
3
效果:
先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也。
然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。
诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也。
# 强调语法
示例:
**先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也.**` `
*然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。*` `
***诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也.***` `
2
3
效果:
先帝创业未半而中道崩殂,今天下三分,益州疲弊,此诚危急存亡之秋也.
然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。
诚宜开张圣听,以光先帝遗德,恢弘志士之气,不宜妄自菲薄,引喻失义,以塞忠谏之路也.
# 列表语法
要创建有序列表,请在每个列表项前添加数字并紧跟一个英文句点。数字不必按数学顺序排列,但是列表应当以数字 1 起始。
要创建无序列表,请在每个列表项前面添加破折号 (-)、星号 (*) 或加号 (+) 。缩进一个或多个列表项可创建嵌套列表。
示例:
1. First item
2. Second item
3. Third item
1. Indented item
2. Indented item
4. Fourth item
- First item
- Second item
- Third item
- Indented item
- Indented item
- Fourth item
2
3
4
5
6
7
8
9
10
11
12
13
效果:
- First item
- Second item
- Third item
- Indented item
- Indented item
- Fourth item
- First item
- Second item
- Third item
- Indented item
- Indented item
- Fourth item
# 链接语法
链接文本放在中括号内,链接地址放在后面的括号中,链接title可选。
使用尖括号可以很方便地把URL或者email地址变成可点击的链接。
示例:
这是Markdown学习文档->[Markdown语法](https://markdown.com.cn)
<https://markdown.com.cn>
2
效果:
这是Markdown学习文档->Markdown语法 (opens new window)
https://markdown.com.cn (opens new window)
# 图片语法
要添加图像,请使用感叹号 (!), 然后在方括号增加替代文本,图片链接放在圆括号里,括号里的链接后可以增加一个可选的图片标题文本。
示例:
![景色图](https://markdown.com.cn/assets/img/philly-magic-garden.9c0b4415.jpg "Magic Gardens")
效果:
# 代码块选项卡
在
code-group
中嵌套code-block
来配合使用。在code-block
标签添加title来指定tab标题,active指定当前tab:
示例:
yarn add vuepress-theme-vdoing -D
npm install vuepress-theme-vdoing -D
// Make sure to add code blocks to your code group
# 表格
要添加表,请使用三个或多个连字符(---)创建每列的标题,并使用管道(|)分隔每列。您可以选择在表的任一端添加管道
您可以通过在标题行中的连字符的左侧,右侧或两侧添加冒号(:),将列中的文本对齐到左侧,右侧或中心。
示例:
| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |
2
3
4
效果:
Syntax | Description |
---|---|
Header | Title |
Paragraph | Text |
示例:
| Syntax | Description | Test Text |
| :--- | :----: | ---: |
| Header | Title | Here's this |
| Paragraph | Text | And more |
2
3
4
效果:
Syntax | Description | Test Text |
---|---|---|
Header | Title | Here's this |
Paragraph | Text | And more |
# 其他组件
# 高亮
使用 mark 标签让文本高亮
示例:
Vdoing是一款简洁高效的 <mark>知识管理&博客</mark> 主题
效果:
Vdoing是一款简洁高效的 知识管理&博客 主题
# 标记
示例:
<Badge text="beta" type="warning"/>
<Badge text="Vdoing主题"/>
<Badge text="Vdoing主题"/>
2
3
效果:
beta
Vdoing主题
c++
# 网页
通过iframe
标签引入processon (opens new window)等在线作图工具生成的链接,也可以直接嵌入网页的内容。
示例:
<iframe src="https://snake.org.cn/" width="100%" height="500" frameborder="0" scrolling="No" leftmargin="0" topmargin="0"></iframe>
效果:
PS:以上内容可以在线游玩
# Markdown 容器
Markdown 容器是对 Markdown 语法的一个扩展,使用简单的语法就可以在页面中呈现丰富的效果。
# 信息框容器
示例:
::: tip
这是一条提示
:::
::: warning
这是一条注意
:::
::: danger
这是一条警告
:::
::: note
这是笔记容器,在 <Badge text="v1.5.0 +" /> 版本才支持哦~
:::
2
3
4
5
6
7
8
9
10
11
12
13
14
15
效果:
提示
这是一条提示
注意
这是一条注意
警告
这是一条警告
笔记
这是笔记容器,在 v1.5.0 + 版本才支持哦~
# 布局容器
示例:
::: center
中间文本
:::
::: right
右侧文本
:::
::: details
这是一个详情块
2
3
4
5
6
7
8
9
10
效果:
中间文本
右侧文本