markdown基础

Frontmatter 🍇

Frontmatter 是 VuePress 中很重要的一个概念，它用于承载 Markdown 文件的配置。Markdown 文件可以包含一个 YAML Frontmatter。

Frontmatter 必须在 Markdown 文件的顶部，并且被包裹在一对三短划线中间。下面是一个基本的示例：

---
lang: zh-CN
title: markdown基础
description: markdown基础
order: 1
category:
  - test
tag:
  - test
---
<!-- 这里是 Markdown 内容 -->
...

你可以通过 Frontmatter 来覆盖当前页面的 lang, title, description 等属性。因此，你可以把 Frontmatter 当作页面级作用域的配置。相关配置参考Frontmatter 配置。

emoji支持 🍉

你可以在你的 Markdown 内容中输入 :EMOJICODE: 来添加 Emoji 表情。前往 emoji-cheat-sheet 来查看所有可用的 Emoji 表情和对应代码。常用的emoji 可以参考emoji列表。

示例：:dog: 🐶

字体 🍎

加粗：**text** 效果：text
斜体：*text* 效果：text
粗体&斜体：***text*** 效果：text
删除线：~~text~~ 效果：~~text~~
下标：text1 效果：text₁
上标：text1 效果：text¹
颜色：text 效果：
背景：text 效果：

属性

可以使用特殊标记{attrs}为 Markdown 元素添加属性。
在 .vuepress/styles/index.scss 中添加对应的属性样式。

一个包含文字的段落。 {#p .a .b align=center customize-attr="content with spaces"}

会被渲染为:
<p id="p" class="a b" align="center" customize-attr="content with spaces">
  一个包含文字的段落。
</p>

标题 🍐

要创建标题，请在标题文本前添加一至六个# 符号。你使用的# 数量将决定层次结构级别和标题的大小。

# A first-level heading
## A second-level heading
### A third-level heading

段落与换行 🍑

通过在文本行之间留一个空白行，可创建新段落。

硬换行：在一行的末尾加上两个以上的空格或者/，然后按下回车键即可实现硬换行。
软换行：在两行文本之间加上一个空行即可实现软换行。
标签换行： 标签。

空格与空行 🍬

通常情况下，多个连续的空格在渲染时会被合并为一个空格。
如果你需要在Markdown文档中显示多个空格，可以使用  来表示空格。
连续的空行也会被解析为一个空行。如果需要显示多个空行可以使用 标签。

分隔线 🍦

你可以在一行中用三个或以上的星号、减号、底线 *** --- ___ 来建立一个分隔线，行内不能有其他东西。

引用文本 🧅

> Text that is a quote

Text that is a quote

提示容器 🍺

::: important 自定义重要
:::

::: info 自定义信息
:::

::: note 自定义注释
:::

::: tip 自定义提示
:::

::: warning 自定义警告
:::

::: caution 自定义危险
:::

代码 📘

行内代码 📖

使用反引号``包围。

代码块 📒

使用两个```包围或者tab键，可以配置语言和标题 ts title=".vuepress/config.ts。
默认显示行号，使用:no-line-numbers禁用行号。

import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: '你好， VuePress',

  theme: defaultTheme({
    logo: 'https://vuejs.org/images/logo.png',
  }),
})

链接 🔗

行内链接：通过将链接文本用方括号[ ]括起来，然后将URL用括号( )括起来。如果你还想要加上链接的 title 文字，只要在网址后面，用双引号把 title 文字包起来即可。
This is [an example](http://example.com/ "Title") inline link.

参考形式的链接：使用另外一个方括号接在链接文字的括号后面，而在第二个方括号里面要填入用以辨识链接的标签，接着，在文件的任意处，你可以把这个标签的链接内容定义出来。

This is [an example][id] reference-style link.
[id]: http://example.com/ "Optional Title Here"

[Google][]
[google]: http://google.com/

提示

标题锚点: #标题 例子：/markdown.md#内置组件 跳转到内置组件

自动链接：<http://example.com/> http://example.com/

图片 🐹

语法和链接类似。

![Alt text](/path/to/img.jpg =widthxheight)
![Alt text][id]
[id]: url/to/image "Optional title attribute"

![Alt](/example.png =200x300)
![Alt](/example.jpg "图片标题" =200x)
![Alt](/example.bmp =x300)

一个惊叹号 !
一个方括号，里面放上图片的替代文字
一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上选择性的 title 文字。
=widthxheight 指定图片大小。

也可以使用 <img> 标签。例：<img src="/assets/images/cover2.jpg"> 。

列表 🌱

有序列表 🌴

有序列表使用数字接着一个英文句点

1.  Bird
2.  McHale
3.  Parish

无序列表 🍁

无序列表使用减号作为列表标记(也可使用星号、加号)。

- Red
- Green
- Blue

* Red
* Green
* Blue

任务列表 🌵

若要创建任务列表，请在列表项前加连字符和空格，后接[ ]。要将任务标记为完成，请使用[x]。

* [x] #739
* [ ] https://github.com/octo-org/octo-repo/issues/740
* [ ] Add delight to the experience when all tasks are complete :tada:

#739
https://github.com/octo-org/octo-repo/issues/740
Add delight to the experience when all tasks are complete 🎉

表格 🍞

可以使用竖线 | 和连字符 - 创建表。连字符用于创建每列的标题，而竖线用于分隔每列。必须在表格前包含空白链接，以便其正确呈现。

|     居中      |         右对齐 | 左对齐         |
| :-----------: | -------------: | :------------- |
| 居中使用`:-:` | 右对齐使用`-:` | 左对齐使用`:-` |
|       b       |      aaaaaaaaa | aaaa           |
|       c       |           aaaa | a              |

居中	右对齐	左对齐
居中使用`:-:`	右对齐使用`-:`	左对齐使用`:-`
b	aaaaaaaaa	aaaa
c	aaaa	a

内置组件 🧉

使用参考内置组件

ArtPlayer: 由 ArtPlayer 驱动的视频播放器
Badge: 多彩的徽章组件
BiliBili: 嵌入 BiliBili 视频
CodePen: 嵌入 CodePen 演示
FontIcon: 字体图标组件
PDF: 嵌入 PDF 查看器
Share: 通过社交媒体分享当前页面
StackBlitz: 嵌入 StackBlitz 演示
SiteInfo: 显示站点
VPBanner: 一个横幅组件
VPCard: 一个卡片组件
VidStack: 由 VidStack 驱动的音频/视频播放器
XiGua: 嵌入 XiGua 视频