Tui

CodePreview 代码预览

用于以代码块形式展示 HTML / Vue / TS 等源码，可自动高亮并支持一键复制。可通过 props 或 slot 传入代码内容。

历史说明：旧版 TsCodePreview 已停止维护，当前文档示例基于 TsCodeBlock 能力。

⚠️ 代码高亮依赖 shiki，使用前需安装：npm install shiki @shikijs/langs @shikijs/themes dedent。如不安装，组件仍可正常渲染，但代码高亮功能不可用。

基础用法

通过 codeHtml 属性传入代码内容，推荐使用该方式。

示例代码

vue

插槽用法

通过默认插槽插入自定义代码块。

              
const sayHello = (name: string): void => {
  console.log('Hello', name);
};

示例代码

vue

属性 Props

codeHtml

需要预览的代码对象，结构见下方 CodeBlock 配置

CodeBlock

codeCopy

是否显示复制按钮

boolean

true

expand

是否启用展开/收起状态（预留）

boolean

false

lang

插槽模式下可指定语言类型（如 ts / vue）

string

theme

高亮主题名称

string

github-light

isDedent

是否对代码做 dedent 处理

boolean

false

CodeBlock Props

lang

语言，比如 html / ts / vue

string

code

代码内容

string

theme

可选主题名，未传时跟随组件 theme

string

isDedent

是否进行 dedent 处理

boolean

false

插槽 Slots

default

自定义代码块内容

基础用法

插槽用法

属性 Props

CodeBlock Props

插槽 Slots