laif-ds/dist/agent-docs/components/MarkdownRenderer.md

Design System di Laif con componenti React basati su principi di Atomic Design

# MarkdownRenderer

## Overview

Renders Markdown with GitHub-flavored Markdown (GFM) and async syntax highlighting using Shiki. Includes Copy button for code blocks.

---

## Usage

```tsx
import { MarkdownRenderer } from "laif-ds";

const content = `
# Hello

Some ` + "`code`" + ` and a list:

- Item A
- Item B
`;

export function Doc() {
  return <MarkdownRenderer>{content}</MarkdownRenderer>;
}
```

- Supports headings, lists, tables, links, blockquotes, and inline code
- Code blocks highlighted when a language class is provided (e.g., `language-ts`)

---

## Notes

- Uses `react-markdown` + `remark-gfm`
- Code highlighting falls back to plain `<pre>` if language is unsupported