Components

CodeBlock 代码块

带编程语言图标、文件标识、复制操作、行号和自动换行的深色代码展示容器。

编程语言图标显示

默认根据 language 或 filename 自动匹配内置编程语言图标；亦可显式关闭（icon: false）或自定义传入图标源。

StatusCard.vuevue

<template>
  <Card>
    <p>部署状态正常</p>
  </Card>
</template>

config.tsts

export default defineConfig({
  endpoint: 'https://api.example.com/v1/projects/production',
  retry: 3
})

deploy.shbash

#!/usr/bin/env bash
set -euo pipefail
bun run build
docker build -t app:latest .

output.loglog

[10:12:01] Building application
[10:12:04] Validating types
[10:12:08] Uploading assets
[10:12:12] Deploying to production
[10:12:16] Deployment complete

<!-- 自动根据 language 或 filename 渲染对应语言图标 -->
<CodeBlock :code="componentCode" language="vue" filename="StatusCard.vue" />
<CodeBlock :code="configCode" language="ts" filename="config.ts" />
<CodeBlock :code="shellCode" language="bash" filename="deploy.sh" />

<!-- 禁用图标，回退至圆点指示器 -->
<CodeBlock :code="logCode" language="log" filename="output.log" :icon="false" />

行号与换行

长内容可保留行号，并按需自动换行。

config.tsts

export default defineConfig({
  endpoint: 'https://api.example.com/v1/projects/production',
  retry: 3
})

<CodeBlock
  :code="configCode"
  language="ts"
  filename="config.ts"
  show-line-numbers
  wrap
/>

受限高度

使用 max-height 为长日志保留滚动区域。

deploy.loglog

[10:12:01] Building application
[10:12:04] Validating types
[10:12:08] Uploading assets
[10:12:12] Deploying to production
[10:12:16] Deployment complete

<CodeBlock
  :code="logCode"
  language="log"
  filename="deploy.log"
  show-line-numbers
  max-height="12rem"
/>

可折叠

开启 collapsible 后可点击标题栏展开 / 收起，折叠状态可通过 v-model:collapsed 受控。收起时不会触发高亮。

<template>
  <Card>
    <p>部署状态正常</p>
  </Card>
</template>

<CodeBlock
  v-model:collapsed="collapsed"
  :code="componentCode"
  language="vue"
  filename="StatusCard.vue"
  collapsible
/>

API 参考

属性	类型	默认值	说明
`code`	`string`	`''`	要展示和复制的源代码。
`language`	`string`	`''`	语言标识，用于展示、高亮以及默认匹配语言图标。
`filename`	`string`	`''`	标题栏中的文件名，其扩展名亦可参与语言图标自动匹配。
`icon`	`IconSource \| boolean`	`undefined`	编程语言图标。true 强制显示；false 禁用显示；支持自定义传入 IconSource。缺省时自动尝试匹配。
`copyable`	`boolean`	`true`	是否显示复制按钮。
`showLineNumbers`	`boolean`	`false`	是否显示行号。
`wrap`	`boolean`	`false`	是否自动换行。
`maxHeight`	`string`	`''`	代码区域最大高度，超出时滚动。
`collapsible`	`boolean`	`false`	是否可通过标题栏折叠代码区域。
`v-model:collapsed`	`boolean`	`false`	折叠状态，仅在 collapsible 时生效；不绑定时组件自行管理。