# Markdown

Renders a markdown string — with fenced-code syntax highlighting via Shiki — as a standalone web component that works in any framework or plain HTML.

<p class="kai-tag-sub">kai-markdown</p>

Turn a raw markdown string into rendered prose — headings, bold, italic, lists, blockquotes, and syntax-highlighted code fences — in any framework or plain HTML.

## Preview

> **tip:** 
Use `<kai-markdown>` to render model output, formatted prose, or documentation outside a SolidJS tree — message bubbles, doc viewers, help panels. In SolidJS, import the `Markdown` primitive directly. The element is `display: block` and fills its container; constrain width on the parent as needed.

## Usage

Set `content` in JavaScript with your markdown string:

```html
<kai-markdown id="md"></kai-markdown>

<script type="module">

  await customElements.whenDefined('kai-markdown');

  const md = document.getElementById('md');
  md.content = '### Hello\nRenders **bold**, _italic_, and `code`.';
</script>
```

- **`content`** — assign it in JavaScript; HTML attributes don't support multiline strings cleanly.
- **`prose-size`** — scales body text: `xs`, `sm` (default), `base`, `lg`. Use `sm` in message bubbles, `base`/`lg` for doc pages.
- **`code-theme`** — defaults to `github-dark-dimmed`; any [Shiki theme](https://shiki.style/themes) works.
- **`code-highlight="false"`** — skips Shiki entirely, rendering code fences as plain monospace.

## Examples

### Default

Headings, bold, italic, a list, a blockquote, and a syntax-highlighted TypeScript fence.

### Rich Content

Ordered lists, unordered lists, blockquotes, and a fenced code block together — representative of typical model output.

### Compact Text Size

`prose-size="xs"` for dense contexts — cards, sidebar panels, or tooltips.

### Large Prose

`prose-size="lg"` for standalone reading contexts — documentation pages or help articles.

### Highlighting Disabled

`code-highlight="false"` renders code fences as plain monospace — no Shiki loads, ideal for raw terminal output or log lines.

## Props

## Composed from