# Markdown

> Safe Markdown renderer: headings, lists, emphasis, inline code, code fences, quotes, tables and links.

Source: https://ui.jcsoftdev.com/docs/components/markdown

Safe Markdown renderer: headings, lists, emphasis, inline code, code fences, quotes, tables
and links. It builds React elements from a parsed AST, so no input ever reaches innerHTML.

## Import

```ts
import { Markdown } from "@jcsoftdev/ui/ai";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/ai/markdown`.

## Usage

```tsx
<Markdown streaming={false}>
  {SAMPLE}
</Markdown>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` * | `string` |  | Markdown source. Raw HTML is shown as text; only http, https and mailto links are active. |
| `streaming` | `boolean` |  | Shows a blinking caret after the last character, for streaming answers. |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/ai-markdown--default)
- [Narrow](/storybook/?path=/story/ai-markdown--narrow)
- [Streaming](/storybook/?path=/story/ai-markdown--streaming)
- [Safe By Default](/storybook/?path=/story/ai-markdown--safe-by-default)
- [Preset Brutal](/storybook/?path=/story/ai-markdown--preset-brutal)

## Source

`packages/ui/src/ai/markdown/markdown.tsx`