Skip to content

feat(code-highlighter): support custom header via scoped slot#106

Merged
cc-hearts merged 1 commit into
mainfrom
feat/code-highlighter-header-slot
Jun 18, 2026
Merged

feat(code-highlighter): support custom header via scoped slot#106
cc-hearts merged 1 commit into
mainfrom
feat/code-highlighter-header-slot

Conversation

@cc-hearts

@cc-hearts cc-hearts commented Jun 17, 2026

Copy link
Copy Markdown
Member

🤔 This is a ...

  • 🆕 New feature

🔗 Related Issues

N/A

💡 Background and Solution

CodeHighlighter 的头部(语言标识、主题切换、复制按钮)此前完全由 props 驱动、内容写死,无法自定义。

本次为 CodeHighlighter 新增 header 作用域插槽,提供该插槽时整体替换默认头部。作用域参数保留了原有能力,便于在自定义头部中复用:

参数 类型 说明
language string 当前代码语言
theme 'light' | 'dark' 当前主题模式
copied boolean 是否处于已复制状态
copy () => void 复制代码内容
toggleTheme () => void 切换主题模式

用法:

<ax-code-highlighter :content="code" language="typescript">
  <template #header="{ language, copied, copy, theme, toggleTheme }">
    <span>{{ language }}</span>
    <a-button size="small" @click="toggleTheme">切换主题</a-button>
    <a-button type="primary" size="small" @click="copy">
      {{ copied ? "已复制" : "复制" }}
    </a-button>
  </template>
</ax-code-highlighter>

同时补充了 SlotsType 静态类型声明、demo、中英文文档与单元测试。

📝 Change Log

Language Changelog
🇺🇸 English CodeHighlighter now supports a scoped header slot to fully customize the header, exposing language / theme / copied state and copy / toggleTheme helpers.
🇨🇳 Chinese CodeHighlighter 新增作用域 header 插槽以完全自定义头部,作用域提供 language / theme / copied 状态及 copy / toggleTheme 方法。

Add a `header` slot to CodeHighlighter so consumers can fully replace the
default header. The slot scope exposes `language`, `theme`, `copied` and the
`copy` / `toggleTheme` helpers so copy and theme-toggle capabilities can be
reused in custom headers. Adds SlotsType typing, a demo, docs and tests.
@cc-hearts cc-hearts merged commit 18a4ce1 into main Jun 18, 2026
1 check passed
@cc-hearts cc-hearts deleted the feat/code-highlighter-header-slot branch June 18, 2026 09:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant