feat(code-highlighter): support custom header via scoped slot#106
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
CodeHighlighter的头部(语言标识、主题切换、复制按钮)此前完全由 props 驱动、内容写死,无法自定义。本次为
CodeHighlighter新增header作用域插槽,提供该插槽时整体替换默认头部。作用域参数保留了原有能力,便于在自定义头部中复用:languagestringtheme'light' | 'dark'copiedbooleancopy() => voidtoggleTheme() => void用法:
同时补充了
SlotsType静态类型声明、demo、中英文文档与单元测试。📝 Change Log
CodeHighlighternow supports a scopedheaderslot to fully customize the header, exposinglanguage/theme/copiedstate andcopy/toggleThemehelpers.CodeHighlighter新增作用域header插槽以完全自定义头部,作用域提供language/theme/copied状态及copy/toggleTheme方法。