代码块
代码块部分支持设置默认折叠状态与高亮样式
代码块折叠
界面模式下,代码块默认是折叠的; 终端模式下,为了让你的库学习者更直观了解demo,代码块默认是展开的。
你也可以手动配置代码块的默认折叠状态
---
defaultCodeCollapse: false // 默认展开
---
Default
vue
<template>
<Space wrap>
<Button type="primary">Primary Button</Button>
<Button>Default Button</Button>
<Button type="dashed">Dashed Button</Button>
<Button type="text">Text Button</Button>
<Button type="link">Link Button</Button>
</Space>
</template>
<script setup lang="ts">
import { Space, Button } from 'ant-design-vue'
</script>
代码块高亮
Sutras在代码块中保留了Vitepress的代码块高亮功能
---
badge: warning-beta
highlight: '{11}'
---
Default
vue
<template>
<Space wrap>
<Button type="primary">Primary Button</Button>
<Button>Default Button</Button>
<Button type="dashed">Dashed Button</Button>
<Button type="text">Text Button</Button>
<Button type="link">Link Button</Button>
</Space>
</template>
<script setup>
import { Space, Button } from 'ant-design-vue'
</script>