CodeBlock

CodeBlock 展示代码片段，支持复制、行号、折叠和运行按钮。

导入方式

按需导入

import { CodeBlock } from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

完整导入

import * as AiChatVue from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

app.use(AiChatVue)

// 模板中可直接使用 <CodeBlock />

基础用法

usage.ts

1	import { ChatProvider } from '@weimin96/ai-chat-vue'
2
3	export function setup() {
4	return ChatProvider
5	}

<script setup lang="ts">
import { CodeBlock } from '@weimin96/ai-chat-vue'

const code = `import { ChatProvider } from '@weimin96/ai-chat-vue'

export function setup() {
  return ChatProvider
}`
</script>

<template>
  <CodeBlock
    language="typescript"
    filename="usage.ts"
    :code="code"
    show-line-numbers
  />
</template>

API

属性	类型	默认值	说明
code	string	必填	代码内容
language	string	text	语言名称
filename	string	undefined	文件名
showLineNumbers	boolean	false	是否显示行号
collapsible	boolean	false	是否可折叠
showRunButton	boolean	false	是否显示运行按钮

事件	说明
run	点击运行按钮时返回代码内容