Markdown 展示示例

示例如下

链接图标

B 站链接图标：哔哩哔哩

c

d

荧光文本

Input

<sapn class="marker-evy">这里是尤雨溪的主页样式，鼠标放在我上面看效果</sapn>

文本 >

Input

> xxxx 文本

xxxx 文本

图片引用

Input

![LOGO](./public/logo.png)

视频引用

链接

Input

[Baidu](https://www.baidu.com)

Baidu

表格

Input

| Tables        |      Are      |  Cool |
| ------------- | :-----------: | ----: |
| col 3 is      | right-aligned | $1600 |
| col 2 is      |   centered    |   $12 |
| zebra stripes |   are neat    |    $1 |

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

Emoji

🎉 💯🌅

Emoji 大全：https://www.emojiall.com/zh-hans/

代码带标题

input

```c [HelloWorld.c]
#include <stdio.h>

int main(){

  printf("Hello World !!!");

  return 0;
}
```

HelloWorld.c

#include <stdio.h>

int main(){

  printf("Hello World !!!");

  return 0;
}

折叠语法

Input

<details>
  <summary>点我展开</summary>
  Markdown默认折叠语法，Vitepress可以使用容器折叠语法，更加美观
</details>

Output

点我展开

Markdown默认折叠语法，Vitepress可以使用容器折叠语法，更加美观

代码组带图标

input

::: code-group

```sh [pnpm]
#查询pnpm版本
pnpm -v
```

```sh [yarn]
#查询yarn版本
yarn -v
```

:::

pnpm

#查询pnpm版本
pnpm -v

yarn

#查询yarn版本
yarn -v

Markdown Extension Examples

This page demonstrates some of the built-in markdown extensions provided by VitePress.

Syntax Highlighting

VitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:

Input

```js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

Output

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

Custom Containers

Input

::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::

Output

INFO

This is an info box.

TIP

This is a tip.

WARNING

This is a warning.

DANGER

This is a dangerous warning.

Details

This is a details block.

More

Check out the documentation for the full list of markdown extensions.