<!-- source-hash: 7a62ccb3d8f27e5378b7ce733e2d1ece -->
Renders rich markdown content with support for Mermaid diagrams, syntax-highlighted code blocks, social media embeds, video players, and OG link previews. Acts as the primary markdown rendering surface for the OpenFrame platform, processing both standard markdown and custom shortcodes before passing content to `react-markdown`.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `RichMarkdownRenderer` | Component | Main renderer wrapping content with runtime context |
| `MermaidDiagram` | Component | Lazy-loads and renders Mermaid diagram SVGs with dark-mode theming |
| `processShortcodes` | Function | Pre-processes `{{youtube:ID}}`, `{% youtube %}`, thumbnail links, and bare URLs into embed HTML before markdown parsing |

**Plugin stack:**
- `remark-gfm` — GitHub Flavored Markdown (tables, task lists, strikethrough)
- `remark-breaks` — Newline-to-`<br>` conversion
- `rehype-highlight` — Syntax highlighting via highlight.js
- `rehype-raw` — Allows injected HTML from shortcode processing

**Supported embed types:** YouTube, Mux/MP4 video, Reddit, Twitter/X, LinkedIn, Figma, OG link previews, Mermaid diagrams, responsive images.

## Usage Example

```typescript
import { RichMarkdownRenderer } from './rich-markdown-renderer';

// Basic usage
<RichMarkdownRenderer content={markdownString} />

// With runtime overrides
<RichMarkdownRenderer
  content={markdownString}
  runtime={{ disableEmbeds: false }}
/>
```

**Supported shortcode formats:**

```text
{{youtube:dQw4w9WgXcQ}}
{% youtube id="dQw4w9WgXcQ" /%}
[![Title](https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg)](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
```

Bare URLs on their own line are auto-detected and converted to OG preview cards or video embeds at render time.

> **Source:** [`rich-markdown-renderer.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/rich-markdown-renderer.tsx)