代码块头部自定义

可以通过 props 控制代码块头部的显示，以及通过命名插槽替换头部左/右两侧内容。

常用 props：

showHeader — 是否显示头部
showCopyButton — 复制按钮
showExpandButton — 展开/收起按钮
showPreviewButton — 预览按钮

排查问题

如果遇到样式冲突（例如 Tailwind 的 reset 或 util 导致头部布局变化），请查看主排查页面以获取 Tailwind 导入顺序和解决方法：/zh/guide/troubleshooting。

示例

下面是常用的示例（README 中也包含同样的示例）；这些示例通常可以直接在项目中复用。

隐藏头部（简单用法）

vue

<CodeBlockNode
  :node="{ type: 'code_block', language: 'javascript', code: 'console.log(1)', raw: 'console.log(1)' }"
  :showHeader="false"
  :loading="false"
/>

使用 #header-left / #header-right 插槽替换默认头部

vue

<CodeBlockNode
  :node="{ type: 'code_block', language: 'html', code: '<div>Hello</div>', raw: '<div>Hello</div>' }"
  :loading="false"
  :showCopyButton="false"
>
  <template #header-left>
    <div class="flex items-center space-x-2">
      <!-- 自定义图标或标签 -->
      <span class="text-sm font-medium">My HTML</span>
    </div>
  </template>

  <template #header-right>
    <div class="flex items-center space-x-2">
      <button class="px-2 py-1 bg-blue-600 text-white rounded">Run</button>
      <button class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded">Inspect</button>
    </div>
  </template>
</CodeBlockNode>

自定义加载占位符（当 stream=false 且 loading=true 时显示）

vue

<CodeBlockNode
  :node="{ type: 'code_block', language: 'python', code: code, raw: code }"
  :stream="false"
  :loading="isLoading"
>
<template #loading="{ loading, stream }">
    <div v-if="loading && !stream" class="p-4 text-center">
      <div class="animate-spin inline-block w-6 h-6 border-2 border-current border-t-transparent rounded-full" />
      <p class="mt-2 text-sm text-gray-500">Initializing editor...</p>
    </div>
  </template>
</CodeBlockNode>

事件与注意事项

组件在复制操作时会触发 copy 事件（事件回调接收复制的文本）；使用 @copy="onCopy" 监听。
组件在预览操作触发时会触发 previewCode 事件；负载为 { type, content, title }，其中 type 为 MIME 类型（例如 text/html）。
若要隐藏某类默认按钮，可使用布尔 props：showCopyButton、showExpandButton、showPreviewButton、showFontSizeButtons。
showHeader 控制是否渲染头部栏。

代码块头部自定义 ​

代码块头部自定义