Tui

CodePreview 代码预览

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

因为该组件依赖于 highlight.js^11.11.1、markdown-it^14.1.0、dedent^1.6.0 于0.0.17版本开始被移除，不再提供该组件，后续会提供更优质的组件。

基础用法

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

<template>
  <TsLoading />
  <TsLoading color="blue" />
  <TsLoading color="#ff4d4f" />
</template>

示例代码

vue

<template>
  <ComponentPagePreview :codeHtml="codeHtml" />
</template>

<script setup lang="ts">
  const codeHtml = {
    lang: 'vue',
    code: `
    <template>
      <TsLoading />
      <TsLoading color="blue" />
      <TsLoading color="#ff4d4f" />
    </template>
  `,
  };
</script>

插槽用法

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

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

示例代码

vue

<template>
  <ComponentPagePreview>
    <pre>
      <code class="language-ts">
      const sayHello = (name: string): void => {
        console.log('Hello', name);
      };
      </code>
    </pre>
  </ComponentPagePreview>
</template>

属性

codeHtml

需要预览的html代码

CodeBlock

codeCopy

是否显示复制按钮

Boolean

true

CodeBlock Props

lang

语言，比如 html / ts / vue

string

type

语言，比如 html / ts / vue

string

code

代码

string

Slots

default

自定义 slot