From 19fe3fa0bb48dabb59b4c5878c6d702ec73f39a8 Mon Sep 17 00:00:00 2001 From: Visal In Date: Mon, 14 Sep 2026 14:13:29 +0100 Subject: [PATCH 1/4] feat(code): Add plain variant to CodeHighlighted component --- .changeset/plain-code-highlighted.md | 5 +++++ .../components/demos/CodeHighlightedDemo.tsx | 16 ++++++++++++++ .../src/components/skill/design-tips.tsx | 3 ++- .../src/pages/components/code-highlighted.mdx | 21 +++++++++++++++++++ packages/kumo/src/code/code-highlighted.tsx | 6 +++++- packages/kumo/src/code/index.ts | 1 + packages/kumo/src/code/provider.test.tsx | 20 ++++++++++++++++++ packages/kumo/src/code/types.ts | 10 +++++++++ 8 files changed, 80 insertions(+), 2 deletions(-) create mode 100644 .changeset/plain-code-highlighted.md diff --git a/.changeset/plain-code-highlighted.md b/.changeset/plain-code-highlighted.md new file mode 100644 index 0000000000..2dd1a616fa --- /dev/null +++ b/.changeset/plain-code-highlighted.md @@ -0,0 +1,5 @@ +--- +"@cloudflare/kumo": patch +--- + +Add a plain CodeHighlighted variant for frameless code blocks. diff --git a/packages/kumo-docs-astro/src/components/demos/CodeHighlightedDemo.tsx b/packages/kumo-docs-astro/src/components/demos/CodeHighlightedDemo.tsx index 867b2cd689..b6bf52f0b5 100644 --- a/packages/kumo-docs-astro/src/components/demos/CodeHighlightedDemo.tsx +++ b/packages/kumo-docs-astro/src/components/demos/CodeHighlightedDemo.tsx @@ -186,6 +186,22 @@ export function CodeHighlightedCopyButtonDemo() { ); } +/** Frameless code block for embedding in another surface */ +export function CodeHighlightedPlainDemo() { + return ( + +
+ +
+ + ); +} + /** Full featured example */ export function CodeHighlightedFullFeaturedDemo() { return ( diff --git a/packages/kumo-docs-astro/src/components/skill/design-tips.tsx b/packages/kumo-docs-astro/src/components/skill/design-tips.tsx index 11204992ad..ff9556bcae 100644 --- a/packages/kumo-docs-astro/src/components/skill/design-tips.tsx +++ b/packages/kumo-docs-astro/src/components/skill/design-tips.tsx @@ -24,9 +24,10 @@ interface CodeExampleProps { export function CodeExample({ code }: CodeExampleProps) { return ( ); } diff --git a/packages/kumo-docs-astro/src/pages/components/code-highlighted.mdx b/packages/kumo-docs-astro/src/pages/components/code-highlighted.mdx index 2910ecdb81..3df018353c 100644 --- a/packages/kumo-docs-astro/src/pages/components/code-highlighted.mdx +++ b/packages/kumo-docs-astro/src/pages/components/code-highlighted.mdx @@ -16,6 +16,7 @@ import { CodeHighlightedHighlightLinesDemo, CodeHighlightedLineNumbersDemo, CodeHighlightedCopyButtonDemo, + CodeHighlightedPlainDemo, CodeHighlightedFullFeaturedDemo, CodeHighlightedSharedProviderDemo, CodeHighlightedCssDemo, @@ -173,6 +174,16 @@ export function App() { +### Plain + +

+ Use `variant="plain"` to remove the outer surface, border, and rounded corners + when embedding highlighted code inside another container. +

+ + + + ### Full Featured

Combine all features for a complete code display experience.

@@ -568,6 +579,16 @@ import { ShikiProvider, CodeHighlighted } from "@cloudflare/kumo/code"; Language identifier (must be in provider's languages) + + + variant + + + "default" | "plain" + + No + Visual style of the code block + showLineNumbers diff --git a/packages/kumo/src/code/code-highlighted.tsx b/packages/kumo/src/code/code-highlighted.tsx index 05b0278167..a7d9a6f44e 100644 --- a/packages/kumo/src/code/code-highlighted.tsx +++ b/packages/kumo/src/code/code-highlighted.tsx @@ -34,6 +34,7 @@ import type { CodeHighlightedProps } from "./types"; export function CodeHighlighted({ code, lang, + variant = "default", showLineNumbers = false, highlightLines, showCopyButton = false, @@ -76,7 +77,10 @@ export function CodeHighlighted({ // Container styles - use flex layout for single-line with copy button // Includes defensive resets (m-0, p-0) to prevent global CSS pollution const containerClasses = cn( - "group relative m-0 w-full min-w-0 rounded-md border border-kumo-fill bg-kumo-base p-0", + "group relative m-0 w-full min-w-0 p-0", + variant === "plain" + ? "rounded-none border-0 bg-transparent" + : "rounded-md border border-kumo-fill bg-kumo-base", showCopyButton && isSingleLine && "flex items-center", className, ); diff --git a/packages/kumo/src/code/index.ts b/packages/kumo/src/code/index.ts index 94b944d992..87c0855921 100644 --- a/packages/kumo/src/code/index.ts +++ b/packages/kumo/src/code/index.ts @@ -39,6 +39,7 @@ export { LANGUAGE_ALIASES } from "./types"; export type { ShikiProviderProps, CodeHighlightedProps, + CodeHighlightedVariant, UseShikiHighlighterResult, ShikiEngine, BundledLanguage, diff --git a/packages/kumo/src/code/provider.test.tsx b/packages/kumo/src/code/provider.test.tsx index 5c587263ad..69ebff64cc 100644 --- a/packages/kumo/src/code/provider.test.tsx +++ b/packages/kumo/src/code/provider.test.tsx @@ -401,6 +401,26 @@ describe("ShikiProvider", () => { expect(mockHighlighter.codeToHtml).toHaveBeenCalledTimes(1); }); + it("renders the plain CodeHighlighted variant without a frame", () => { + const { container } = render( + + + , + ); + + const classList = container.firstElementChild?.classList; + expect(classList?.contains("rounded-none")).toBe(true); + expect(classList?.contains("border-0")).toBe(true); + expect(classList?.contains("bg-transparent")).toBe(true); + expect(classList?.contains("rounded-md")).toBe(false); + expect(classList?.contains("border-kumo-fill")).toBe(false); + expect(classList?.contains("bg-kumo-base")).toBe(false); + }); + it("exposes normalized languages in context so hook alias resolution works end-to-end", async () => { // This is the integration test for the bug where the context stores raw // aliases (e.g., ["js", "ts"]) but the hook normalizes to canonical names diff --git a/packages/kumo/src/code/types.ts b/packages/kumo/src/code/types.ts index 4ae708824f..80fa36fa96 100644 --- a/packages/kumo/src/code/types.ts +++ b/packages/kumo/src/code/types.ts @@ -135,6 +135,8 @@ export interface UseShikiHighlighterResult { /** * Props for CodeHighlighted component. */ +export type CodeHighlightedVariant = "default" | "plain"; + export interface CodeHighlightedProps { /** Source code to display */ code: string; @@ -146,6 +148,14 @@ export interface CodeHighlightedProps { */ lang: LanguageInput | (string & {}); + /** + * Visual style of the code block. + * - `"default"` — Code block with a surface, border, and rounded corners + * - `"plain"` — Frameless code block for embedding in another surface + * @default "default" + */ + variant?: CodeHighlightedVariant; + /** Display line numbers */ showLineNumbers?: boolean; From d6cd50e95857ea32caf1da2066d4200748cf7e10 Mon Sep 17 00:00:00 2001 From: Visal In Date: Tue, 15 Sep 2026 11:32:08 +0100 Subject: [PATCH 2/4] fix(code): constrain plain variant props and remove padding --- .changeset/plain-code-highlighted.md | 2 +- .../components/demos/CodeHighlightedDemo.tsx | 44 +++++++++++--- .../src/components/skill/design-tips.tsx | 2 +- packages/kumo/src/code/code-highlighted.tsx | 34 +++++++++-- packages/kumo/src/code/provider.test.tsx | 60 +++++++++++++++++++ packages/kumo/src/code/types.ts | 28 +++++---- packages/kumo/src/primitives/index.ts | 5 +- 7 files changed, 145 insertions(+), 30 deletions(-) diff --git a/.changeset/plain-code-highlighted.md b/.changeset/plain-code-highlighted.md index 2dd1a616fa..b3dd1e8245 100644 --- a/.changeset/plain-code-highlighted.md +++ b/.changeset/plain-code-highlighted.md @@ -2,4 +2,4 @@ "@cloudflare/kumo": patch --- -Add a plain CodeHighlighted variant for frameless code blocks. +Add a plain CodeHighlighted variant for frameless, padding-free code blocks that cannot display a copy button. diff --git a/packages/kumo-docs-astro/src/components/demos/CodeHighlightedDemo.tsx b/packages/kumo-docs-astro/src/components/demos/CodeHighlightedDemo.tsx index b6bf52f0b5..f1e6759c46 100644 --- a/packages/kumo-docs-astro/src/components/demos/CodeHighlightedDemo.tsx +++ b/packages/kumo-docs-astro/src/components/demos/CodeHighlightedDemo.tsx @@ -190,13 +190,43 @@ export function CodeHighlightedCopyButtonDemo() { export function CodeHighlightedPlainDemo() { return ( -
- +
+
+ +
+
+ +
); diff --git a/packages/kumo-docs-astro/src/components/skill/design-tips.tsx b/packages/kumo-docs-astro/src/components/skill/design-tips.tsx index ff9556bcae..309ef5914a 100644 --- a/packages/kumo-docs-astro/src/components/skill/design-tips.tsx +++ b/packages/kumo-docs-astro/src/components/skill/design-tips.tsx @@ -24,7 +24,7 @@ interface CodeExampleProps { export function CodeExample({ code }: CodeExampleProps) { return ( pre]:!m-0 [&>pre]:!rounded-none [&>pre]:!border-0 [&>pre]:!bg-transparent", + "[&>pre]:font-mono [&>pre]:text-sm [&>pre]:leading-relaxed", + variant === "plain" ? "[&>pre]:!p-0" : "[&>pre]:!p-4", + // Highlighted lines normally extend into the default padding. A plain + // block has no padding, so keep its highlights within the content width. + variant === "plain" && + "[&_.line-highlighted]:!m-0 [&_.line-highlighted]:!w-full [&_.line-highlighted]:!px-0", + ); + // Copy button - inline for single-line, absolute for multi-line // Hidden until hover (or when showing "Copied!" feedback) const copyButton = showCopyButton ? ( @@ -109,7 +130,10 @@ export function CodeHighlighted({ const lineNumbers = showLineNumbers && !isSingleLine ? (