Skip to content

代码块

代码块部分支持设置默认折叠状态与高亮样式

代码块折叠

界面模式下,代码块默认是折叠的; 终端模式下,为了让你的库学习者更直观了解demo,代码块默认是展开的。

你也可以手动配置代码块的默认折叠状态

---
defaultCodeCollapse: false // 默认展开
---
Default
expand codecollapse code
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
expand codecollapse code
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>

基于 MIT 许可发布