# Code Block

Syntax-highlighted code with a copy button — one element, every language, light and dark.

<p class="kai-tag-sub">kai-code-block</p>

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

## Preview

> **tip:** 
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:

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

<script type="module">

  await customElements.whenDefined('kai-code-block');

  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](https://shiki.style/languages): `ts`, `python`, `bash`, `json`, `html`.
- **`code-theme`** defaults to `github-dark-dimmed`. Any [Shiki theme](https://shiki.style/themes) works.
- **`code-highlight="false"`** skips Shiki entirely — useful for raw log output.

## Examples

### TypeScript

### JavaScript

### Python

### Shell / Bash

### Compact Text Size

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

### Highlighting Disabled

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

## Props

## Composed from