website/posts/markdown-examples.md

title, description, color, impression, categories, tags, date

title	description	color	impression	categories	tags	date
Markdown Extension Examples	This page demonstrates some of the built-in markdown extensions provided by VitePress.					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, 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. :::

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

<!-- 基础按钮 -->
<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

More

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