Code Block

kai-code-block

Drop in a syntax-highlighted snippet with a built-in copy button — set one property, pick a language, and Shiki handles the rest.

• Shadow DOM
• Shiki highlighting
• 100+ languages
• Built-in copy button
• Light / dark themes

Preview

When to use

Use <kai-code-block> for highlighted snippets outside SolidJS — message bubbles, tutorial cards, documentation panes. In SolidJS, compose CodeBlock and CodeBlockCode directly for finer control. The element is display: block and fills its container.

Usage

Set code in JavaScript (multiline strings don’t survive HTML attributes) and language as an attribute:

<kai-code-block id="cb" language="ts"></kai-code-block>

<script type="module">
  import '@kitn.ai/ui/elements';
  const cb = document.getElementById('cb');
  cb.code = `export function greet(name: string) {
  return \`Hello, \${name}!\`;
}`;
</script>

• code — assign it in JavaScript; multiline strings won’t survive HTML attribute serialization.
• language defaults to tsx. Pass any Shiki grammar name: ts, python, bash, json, html.
• code-theme defaults to github-dark-dimmed. Any Shiki theme works.
• code-highlight="false" skips Shiki entirely — useful for raw log output.

Examples

TypeScript

Code

JavaScript

Code

Python

Code

Shell / Bash

Code

Compact Text Size

prose-size="xs" tightens the font for dense snippets or embedded cards.

Code

Highlighting Disabled

code-highlight="false" renders plain monospace — no Shiki, no colours. Good for terminal output or log lines.

Code

Props

Property	Type	Default	Notes
code	string	''	The source code to render.
language	string	—	Language grammar (e.g. `js`, `python`). Defaults to `tsx`.
codeTheme	string	'github-dark-dimmed'	Shiki theme name.
codeHighlight	boolean	true	Disable syntax highlighting (renders plain text, no Shiki).
proseSize	"xs" | "sm" | "base" | "lg"	'sm'	Code text sizing.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

CodeBlockCodeBlockCode

---

Need a hand? Report a bug Ask for help