Code

代码块组件，拦截 <code> 标签，显示文件名、语言标签和复制按钮。

演示

Here is a function: <code lang="ts" filename="greet.ts">function greet(name: string) { return `Hello, ${name}!` }</code>

---

Here is a function:

greet.ts

function greet(name: string) {
  return `Hello, ${name}!`
}

<template>
  <div>
    <Input v-model="text" :rows="3" :simulate-text="exampleText" />

    <hr>

    <div>
      <StreamContains :model-value="text" mode="accurate">
        <Code />
      </StreamContains>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { StreamContains, Code } from 'stream-ui'
import Input from '../../.comm/Input.vue'

const exampleText = 'Here is a function:\n<code lang="ts" filename="greet.ts">function greet(name: string) {\n  return `Hello, ${name}!`\n}</code>'
const text = ref(exampleText)
</script>

使用

<StreamContains :model-value="text" mode="accurate">
  <Code />
</StreamContains>

示例

<code lang="ts" filename="hello.ts">const msg: string = "hello"</code>

属性

属性名	类型	来源	说明
content	string	标签内文本	代码内容
isClosed	boolean	注入	标签是否已闭合
attrs.lang	string	标签属性	语言标识，显示在文件名位置
attrs.filename	string	标签属性	文件名，优先级高于 lang

CLI

npx @huiol/stream-ui add code

生成 src/components/ui/code.vue。