logo
Markdown Extension ExamplesThis page demonstrates some of the built-in markdown extensions provided by VitePress.

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

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

Output

js
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 规范的按钮组件，支持多种样式和功能。

属性列表

属性类型默认值可选值描述
textstring-任意字符串按钮显示的文本内容
hrefstring-任意URL如果提供，按钮将渲染为链接
iconstring-Material Icons 名称按钮左侧的图标
sizestring"s""xs", "s", "m", "l", "xl"按钮尺寸
shapestring"round""round", "square"按钮形状
colorstring"filled""elevated", "filled", "tonal", "outlined", "standard", "text"按钮颜色样式
targetstring"_blank""_blank", "_self", "_parent", "_top"链接打开方式

尺寸规格

尺寸高度内边距字体大小图标大小
xs32px12pxlabel-large20px
s40px16pxlabel-large20px
m56px24pxtitle-medium24px
l96px48pxheadline-small32px
xl136px64pxheadline-large40px

使用示例

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

链接按钮home 带图标链接

More

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

在此页上

Markdown Extension Examples

arrow_upward