feat(kcodeblock): introduce new function prop codeRenderer for syntax highlighting#3139
Closed
kingyue737 wants to merge 3 commits intomainfrom
Closed
feat(kcodeblock): introduce new function prop codeRenderer for syntax highlighting#3139kingyue737 wants to merge 3 commits intomainfrom
codeRenderer for syntax highlighting#3139kingyue737 wants to merge 3 commits intomainfrom
Conversation
✅ Deploy Preview for kongponents-sandbox ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for kongponents ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces a new codeRenderer prop for KCodeBlock to enable consumer-provided (async or sync) HTML rendering for syntax highlighting, and updates docs/sandbox/tests to demonstrate and validate the new API.
Changes:
- Added
CodeBlockRenderDatatype and a newcodeRendererprop toCodeBlockProps. - Updated
KCodeBlockto awaitcodeRendereroutput and render it viav-html, including a pending/hidden initial state. - Added Cypress coverage plus updated sandbox and docs to use
codeRendererinstead of thecode-block-renderevent for highlighting examples.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types/code-block.ts | Introduces CodeBlockRenderData and the codeRenderer prop typing. |
| src/components/KCodeBlock/KCodeBlock.vue | Implements async rendering pipeline (applyCodeRenderer, pending state, updated watchers). |
| src/components/KCodeBlock/KCodeBlock.cy.ts | Adds Cypress tests to validate codeRenderer behavior (mount, updates, pending, event timing). |
| sandbox/pages/SandboxCodeBlock.vue | Updates sandbox highlighting integration to return HTML via codeRenderer. |
| docs/components/codeblock.md | Documents codeRenderer and updates syntax-highlighting examples and guidance. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new codeRenderer function prop to KCodeBlock to enable flicker-free (async) syntax highlighting by letting the component await highlighted HTML before showing code.
Changes:
- Introduces
CodeBlockRenderDataand addscodeRenderertoCodeBlockProps. - Updates
KCodeBlockto optionally rendercodeRendereroutput with a pending/hidden state while rendering resolves. - Adds Cypress coverage for
codeRenderer, updates sandbox usage, and documents the new prop + updated syntax-highlighting guidance.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types/code-block.ts | Adds CodeBlockRenderData and the new codeRenderer prop type. |
| src/components/KCodeBlock/KCodeBlock.vue | Implements async rendering flow, pending state, and adjusts watchers/mount behavior. |
| src/components/KCodeBlock/KCodeBlock.cy.ts | Adds component tests covering codeRenderer behavior and event timing. |
| sandbox/pages/SandboxCodeBlock.vue | Migrates sandbox highlighting example from event-based mutation to codeRenderer. |
| docs/components/codeblock.md | Documents codeRenderer and updates syntax-highlighting guidance/examples. |
Comments suppressed due to low confidence (1)
src/components/KCodeBlock/KCodeBlock.vue:550
codeRendereris awaited beforeupdateMatchingLineNumbers()/setDefaultMatchingLineNumbers()on mount. With an initialqueryprop (or any expensive renderer), this delays match calculation/UI state and also meanscodeRendererreceivesmatchingLineNumbersthat may still reflect the previous/default state. Consider computing matching lines first (or in parallel), and only delaying thecode-block-renderemit / visibility until the renderer resolves.
onMounted(async function() {
shortcutManager.registerListener()
if (codeRenderer) {
await applyCodeRenderer()
}
emitCodeBlockRenderEvent()
if (!queryProp && highlightedLineNumbers.length) {
setDefaultMatchingLineNumbers()
} else {
updateMatchingLineNumbers()
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+936
to
+939
|
|
||
| &.render-pending { | ||
| visibility: hidden; | ||
| } |
kingyue737
requested review from
a team,
Justineo,
adamdehaven and
jillztom
as code owners
Collaborator
🔴 PR audit failed. 🔴🔥 Renovate Security PRs detected.There are 2 open renovate security PRs older than 3 days. This PR cannot be merged until all renovate security PRs created more than 3 days ago are resolved. 🔥 PNPM Audit issues detected.PR with those issues cannot be merged. How to resolve:
|
Collaborator
Preview package from this PR in consuming applicationIn consuming application project install preview version of kongponents generated by this PR: |
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.
Summary
This PR adds a
codeRendererfunction prop toKCodeBlockfor flicker-free syntax highlighting.Previously, applying syntax highlighting required listening to
@code-block-renderand mutatingcodeElement.innerHTMLwhich causes a flash of unstyled code:Screen.Recording.2026-01-13.at.14.12.37.mov
With
codeRenderer, the component awaits the returned HTML internally before rendering, so unstyled code is never visible. On subsequent updates, the previous highlighted content stays visible until the new result arrives. This also helps eliminate flaky tests caused by syntax highlighters in consumer apps. Previously, tests could observe the un-highlighted code before the highlighter replaced it.