mirror of
https://github.com/sendevia/website.git
synced 2026-03-06 15:42:34 +08:00
181 lines
4.0 KiB
Markdown
181 lines
4.0 KiB
Markdown
---
|
|
title: "Markdown Extension Examples"
|
|
description: "This page demonstrates some of the built-in markdown extensions provided by VitePress."
|
|
color: ""
|
|
impression: ""
|
|
categories:
|
|
tags:
|
|
date: 2007-08-31T00:00:00Z
|
|
|
|
---
|
|
|
|
# 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](https://github.com/shikijs/shiki), with additional features like line-highlighting:
|
|
|
|
**Input**
|
|
|
|
````md
|
|
```js{4}
|
|
export default {
|
|
data () {
|
|
return {
|
|
msg: 'Highlighted!'
|
|
}
|
|
}
|
|
}
|
|
```
|
|
````
|
|
|
|
**Output**
|
|
|
|
```js{4}
|
|
export default {
|
|
data () {
|
|
return {
|
|
msg: 'Highlighted!'
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Custom Containers
|
|
|
|
**Input**
|
|
|
|
```md
|
|
::: 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.
|
|
:::
|
|
|
|
## Material Buttons
|
|
|
|
MaterialButton 组件是一个遵循 Material Design 3 规范的按钮组件，支持多种样式和功能。
|
|
|
|
### 属性列表
|
|
|
|
| 属性 | 类型 | 默认值 | 可选值 | 描述 |
|
|
|------|------|--------|--------|------|
|
|
| `text` | `string` | - | 任意字符串 | 按钮显示的文本内容 |
|
|
| `href` | `string` | - | 任意URL | 如果提供，按钮将渲染为链接 |
|
|
| `icon` | `string` | - | Material Icons 名称 | 按钮左侧的图标 |
|
|
| `size` | `string` | `"s"` | `"xs"`, `"s"`, `"m"`, `"l"`, `"xl"` | 按钮尺寸 |
|
|
| `shape` | `string` | `"round"` | `"round"`, `"square"` | 按钮形状 |
|
|
| `color` | `string` | `"filled"` | `"elevated"`, `"filled"`, `"tonal"`, `"outlined"`, `"standard"`, `"text"` | 按钮颜色样式 |
|
|
| `target` | `string` | `"_blank"` | `"_blank"`, `"_self"`, `"_parent"`, `"_top"` | 链接打开方式 |
|
|
|
|
### 尺寸规格
|
|
|
|
| 尺寸 | 高度 | 内边距 | 字体大小 | 图标大小 |
|
|
|------|------|--------|----------|----------|
|
|
| `xs` | 32px | 12px | label-large | 20px |
|
|
| `s` | 40px | 16px | label-large | 20px |
|
|
| `m` | 56px | 24px | title-medium | 24px |
|
|
| `l` | 96px | 48px | headline-small | 32px |
|
|
| `xl` | 136px | 64px | headline-large | 40px |
|
|
|
|
### 使用示例
|
|
|
|
**Input**
|
|
|
|
```md
|
|
<!-- 基础按钮 -->
|
|
<MaterialButton text="默认按钮" />
|
|
|
|
<!-- 带图标按钮 -->
|
|
<MaterialButton text="带图标按钮" icon="favorite" />
|
|
|
|
<!-- 链接按钮 -->
|
|
<MaterialButton text="链接按钮" href="https://example.com" />
|
|
|
|
<!-- 不同尺寸 -->
|
|
<MaterialButton text="大号按钮" size="l" />
|
|
<MaterialButton text="小号按钮" size="xs" />
|
|
|
|
<!-- 不同形状 -->
|
|
<MaterialButton text="方形按钮" shape="square" />
|
|
|
|
<!-- 不同颜色样式 -->
|
|
<MaterialButton text="轮廓按钮" color="outlined" />
|
|
<MaterialButton text="强调按钮" color="tonal" />
|
|
<MaterialButton text="提升按钮" color="elevated" />
|
|
<MaterialButton text="文本按钮" color="text" />
|
|
|
|
<!-- 组合使用 -->
|
|
<MaterialButton text="带图标链接" href="/" icon="home" target="_self" />
|
|
```
|
|
|
|
**Output**
|
|
|
|
<!-- 基础按钮 -->
|
|
<MaterialButton text="默认按钮" />
|
|
|
|
<!-- 带图标按钮 -->
|
|
<MaterialButton text="带图标按钮" icon="favorite" />
|
|
|
|
<!-- 链接按钮 -->
|
|
<MaterialButton text="链接按钮" href="https://example.com" />
|
|
|
|
<!-- 不同尺寸 -->
|
|
<MaterialButton text="大号按钮" size="l" />
|
|
<MaterialButton text="小号按钮" size="xs" />
|
|
|
|
<!-- 不同形状 -->
|
|
<MaterialButton text="方形按钮" shape="square" />
|
|
|
|
<!-- 不同颜色样式 -->
|
|
<MaterialButton text="轮廓按钮" color="outlined" />
|
|
<MaterialButton text="强调按钮" color="tonal" />
|
|
<MaterialButton text="提升按钮" color="elevated" />
|
|
<MaterialButton text="文本按钮" color="text" />
|
|
|
|
<!-- 组合使用 -->
|
|
<MaterialButton text="带图标链接" href="/" icon="home" target="_self" />
|
|
|
|
## More
|
|
|
|
Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).
|