Markdown

kai-markdown

Turns text into formatted prose with highlighted code, outside a framework tree.

• Shadow DOM
• Shiki highlighting
• 4 prose sizes
• GFM support
• Highlight on/off

Preview

When to use

To render model output or documentation outside a SolidJS tree: message bubbles, doc viewers, help panels. In SolidJS, import the Markdown primitive directly.

Usage

Set content in JavaScript with your markdown string:

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

<script type="module">
  import '@kitn.ai/ui/web-components';

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

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

• content: assign it in JavaScript; multiline strings don’t survive HTML attributes 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 works.
• code-highlight="false" — skips Shiki entirely, rendering code fences as plain monospace.

Examples

Default

Code

Rich Content

Code

Compact Text Size

For dense contexts: cards, sidebar panels, tooltips.

Code

Large Prose

Code

Highlighting Disabled

No Shiki loads, so it suits raw terminal output or log lines.

Code

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
content	string	''	The markdown source.
proseSize	"xs" | "sm" | "base" | "lg"	'sm'	Text and markdown sizing.
codeTheme	string	'github-dark-dimmed'	Shiki theme for fenced code blocks.
codeHighlight	boolean	true	Set false to render plain `pre` blocks, with no highlighter load.

Composed from

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

Markdown

---

Need a hand? Report a bug Ask for help