Markdown

kai-markdown

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

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

Preview

When to use

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:

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

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

  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 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.

Code

Rich Content

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

Code

Compact Text Size

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

Code

Large Prose

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

Code

Highlighting Disabled

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

Code

Props

Property	Type	Default	Notes
content	string	''	The markdown source to render.
proseSize	"xs" | "sm" | "base" | "lg"	'sm'	Text/markdown sizing.
codeTheme	string	'github-dark-dimmed'	Shiki theme for fenced code blocks.
codeHighlight	boolean	true	Disable syntax highlighting (no Shiki loads).

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