CodeShowcase

Pair a code block with its visible result and the context needed to understand both.

CodeShowcase

View source ยท API reference

Code and its result

Write a normal fenced code block in the default slot. ts-ssg highlights it automatically; the result slot renders the matching component.

A SMALL EXAMPLE

Semantic status

One component, one clear message.

MDX 
<Badge tone="success">Ready</Badge>
Rendered result Live component
Ready 
<CodeShowcase
  eyebrow="A SMALL EXAMPLE"
  title="Semantic status"
  summary="One component, one clear message."
  language="MDX"
  resultTitle="Rendered result"
  resultMeta="Live component"
  tone="accent"
>

```html
<Badge tone="success">Ready</Badge>
```

  <template #result>
    <Badge tone="success">Ready</Badge>
  </template>
</CodeShowcase>

A focused code note

Omit resultTitle and resultMeta when a result panel is unnecessary.

A named value

TypeScript 
const releaseName = 'Preview'
<CodeShowcase title="A named value" language="TypeScript" variant="outline">
  <pre><code>const releaseName = 'Preview'</code></pre>
</CodeShowcase>

Behavior and accessibility

The language prop is a badge, not a syntax-highlighting engine. ts-ssg highlights fenced code in MDX automatically. A result slot is rendered only when resultTitle or resultMeta is present. Keep results keyboard-accessible when they contain controls.

API reference

CodeShowcase contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

eyebrow

RefOrValue<string>
Default
not set

Short context above the heading, such as a category or release label.

title

RefOrValue<string>
Default
not set

Visible heading. Choose a short title that identifies the content or task.

summary

RefOrValue<string>
Default
not set

A concise explanation beneath the heading.

language

RefOrValue<string>
Default
not set

Language label displayed in a Badge. It does not transform source text.

resultTitle

RefOrValue<string>
Default
not set

Result heading. Setting this or resultMeta enables the result panel.

resultMeta

RefOrValue<string>
Default
not set

Result status or metadata badge. Setting this or resultTitle enables the result panel.

tone

RefOrValue<SemanticTone>
Default
inherited

Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.

variant

RefOrValue<ComponentVariant>
Default
surface

Visual treatment. Accepts solid, surface, surfaceAlt, spotlight, glass, flat, flatAlt, flatSolid, outlineFill, outline, subtle, subtleBtn, link, sheen, underline, rail, bracket or none.

Composition

Default slot: code or other explanatory content. result: rendered example. Register defineCodeShowcaseComponent with Panel, Flex, SectionHeader and Badge.