Tui

CodePreview 代码预览
用于以代码块形式展示 HTML / Vue / TS 等源码,可自动高亮并支持一键复制。可通过 propsslot 传入代码内容。
历史说明:旧版 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