### Install react-markdown via package managers and ESM

Source: https://github.com/remarkjs/react-markdown/blob/main/readme.md

Instructions for installing the react-markdown package using npm for Node.js or importing via ESM URLs for Deno and browser environments.

```sh
npm install react-markdown
```

```js
import Markdown from 'https://esm.sh/react-markdown@10'
```

```html
<script type="module">
  import Markdown from 'https://esm.sh/react-markdown@10?bundle'
</script>
```

--------------------------------

### Use remark-math and rehype-katex plugins with react-markdown

Source: https://github.com/remarkjs/react-markdown/blob/main/readme.md

Demonstrates how to integrate remark-math for parsing math expressions in markdown and rehype-katex for rendering them using KaTeX. This requires installing 'react-markdown', 'remark-math', 'rehype-katex', and 'katex'. The CSS for KaTeX must be imported separately.

```javascript
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'
import 'katex/dist/katex.min.css' // `rehype-katex` does not import the CSS for you

const markdown = `The lift coefficient ($C_L$) is a dimensionless coefficient.`

createRoot(document.body).render(
  <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>
    {markdown}
  </Markdown>
)
```

--------------------------------

### Use remark-gfm plugin with options in react-markdown

Source: https://github.com/remarkjs/react-markdown/blob/main/readme.md

Shows how to configure remark plugins with options, specifically for remark-gfm to control strikethrough behavior. The plugin and its options are passed as an array to the remarkPlugins prop. This example disables single tilde strikethrough.

```javascript
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

const markdown = 'This ~is not~ strikethrough, but ~~this is~~!'

createRoot(document.body).render(
  <Markdown remarkPlugins={[[remarkGfm, {singleTilde: false}]]}>
    {markdown}
  </Markdown>
)
```

--------------------------------

### Use remark-gfm plugin with react-markdown

Source: https://github.com/remarkjs/react-markdown/blob/main/readme.md

Demonstrates how to use the remark-gfm plugin to enable GitHub Flavored Markdown features such as strikethrough, tables, tasklists, and direct URL support within react-markdown. This requires installing 'react-markdown' and 'remark-gfm'.

```javascript
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

const markdown = `A paragraph with *emphasis* and **strong importance**.

> A block quote with ~strikethrough~ and a URL: https://reactjs.org.

* Lists
* [ ] todo
* [x] done

A table:

| a | b |
| - | - |
`

createRoot(document.body).render(
  <Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>
)
```

--------------------------------

### Render basic markdown with react-markdown

Source: https://github.com/remarkjs/react-markdown/blob/main/readme.md

A basic implementation showing how to import the Markdown component and render a markdown string within a React root.

```js
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'

const markdown = '# Hi, *Pluto*!'

createRoot(document.body).render(<Markdown>{markdown}</Markdown>)
```

--------------------------------

### Extend react-markdown with plugins

Source: https://github.com/remarkjs/react-markdown/blob/main/readme.md

Demonstrates how to use remark plugins, such as remark-gfm, to add support for extended markdown features like tables, tasklists, and auto-linked URLs.

```js
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

const markdown = `Just a link: www.nasa.gov.`

createRoot(document.body).render(
  <Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>
)
```

--------------------------------

### Configure remarkPlugins for Markdown AST Transformation

Source: https://context7.com/remarkjs/react-markdown/llms.txt

Use the remarkPlugins option to apply remark plugins for transforming the markdown Abstract Syntax Tree (AST) before it's converted to HTML. Common plugins like remark-gfm for GitHub Flavored Markdown and remark-toc for table of contents generation can be included. Plugins can also accept options for fine-grained control.

```jsx
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import remarkToc from 'remark-toc'

// GitHub Flavored Markdown (tables, strikethrough, task lists, autolinks)
const gfmMarkdown = `
| Feature | Supported |
| ------- | --------- |
| Tables  | ✓         |

~~strikethrough~~ and https://example.com

- [x] Task done
- [ ] Task pending
`
<Markdown remarkPlugins={[remarkGfm]}>{gfmMarkdown}</Markdown>
// Output includes: <table>, <del>, <a>, <input type="checkbox">

// Footnotes with GFM
<Markdown remarkPlugins={[remarkGfm]}>
  {'Here is a footnote[^1]\n\n[^1]: Footnote content'}
</Markdown>

// Plugin with options (single tilde disabled for strikethrough)
<Markdown remarkPlugins={[[remarkGfm, {singleTilde: false}]]}>
  {'~not strikethrough~ but ~~this is~~'}
</Markdown>
// Output: <p>~not strikethrough~ but <del>this is</del></p>

// Table of contents generation
<Markdown remarkPlugins={[remarkToc]}>
  {'# Doc\n## Contents\n## Section 1\n## Section 2'}
</Markdown>
```

--------------------------------

### Enable HTML in Markdown with rehype-raw

Source: https://github.com/remarkjs/react-markdown/blob/main/readme.md

Demonstrates how to use the rehype-raw plugin to safely render HTML tags within markdown content. This requires the rehype-raw dependency and should only be used in trusted environments due to security implications.

```javascript
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'

const markdown = `<div class="note">

Some *emphasis* and <strong>strong</strong>!

</div>`

createRoot(document.body).render(
  <Markdown rehypePlugins={[rehypeRaw]}>{markdown}</Markdown>
)
```

--------------------------------

### Configure AST transformation with remarkRehypeOptions

Source: https://context7.com/remarkjs/react-markdown/llms.txt

The remarkRehypeOptions prop allows passing configuration to the underlying remark-rehype processor. This is used to customize footnote IDs, label tags, and other AST-to-HTML conversion behaviors.

```jsx
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

// Customize footnote ID prefix
<Markdown
  remarkPlugins={[remarkGfm]}
  remarkRehypeOptions={{clobberPrefix: 'custom-'}}
>
  {'Text[^1]\n\n[^1]: Footnote'}
</Markdown>

// Configure how handlers work
<Markdown
  remarkRehypeOptions={{
    allowDangerousHtml: true,  // Pass raw HTML through (use with rehype-raw)
    clobberPrefix: 'note-',
    footnoteLabel: 'Notes',
    footnoteLabelTagName: 'h3'
  }}
  remarkPlugins={[remarkGfm]}
>
  {'Content with footnote[^ref]\n\n[^ref]: Note text'}
</Markdown>
```

--------------------------------

### Render Markdown Synchronously with react-markdown

Source: https://context7.com/remarkjs/react-markdown/llms.txt

The primary component for rendering markdown content synchronously. It supports standard CommonMark syntax including headings, code blocks, lists, and blockquotes.

```jsx
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'

// Basic usage
const basicMarkdown = '# Hello World\n\nThis is **bold** and *italic* text.'
createRoot(document.getElementById('root')).render(
  <Markdown>{basicMarkdown}</Markdown>
)

// With children prop
<Markdown children="## Heading 2" />

// Code blocks with language
const codeExample = '```javascript\nconst x = 42;\nconsole.log(x);\n```'
<Markdown>{codeExample}</Markdown>

// Lists and blockquotes
const listMarkdown = `
> A blockquote

- Item 1
- Item 2
  - Nested item

1. Ordered item
2. Another item
`
<Markdown>{listMarkdown}</Markdown>
```

--------------------------------

### Use custom components for syntax highlighting in react-markdown

Source: https://github.com/remarkjs/react-markdown/blob/main/readme.md

Illustrates overriding default element rendering in react-markdown to implement custom behavior, such as syntax highlighting for code blocks using react-syntax-highlighter. This involves providing a 'components' prop with a custom 'code' component.

```javascript
import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'

// Did you know you can use tildes instead of backticks for code in markdown? ✨
const markdown = `Here is some JavaScript code:

~~~js
console.log('It works!')
~~~`

createRoot(document.body).render(
  <Markdown
    children={markdown}
    components={{
      code(props) {
        const {children, className, node, ...rest} = props
        const match = /language-(\w+)/.exec(className || '')
        return match ? (
          <SyntaxHighlighter
            {...rest}
            PreTag="div"
            children={String(children).replace(/\n$/, '')}
            language={match[1]}
            style={dark}
          />
        ) : (
          <code {...rest} className={className}>
            {children}
          </code>
        )
      }
    }}
  />
)
```

--------------------------------

### Configure rehypePlugins for HTML AST Transformation

Source: https://context7.com/remarkjs/react-markdown/llms.txt

The rehypePlugins option allows you to apply rehype plugins to transform the HTML Abstract Syntax Tree (AST) after markdown conversion. This is useful for tasks like syntax highlighting, sanitizing HTML output for security, or enabling raw HTML support. Multiple plugins can be combined.

```jsx
import Markdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'
import rehypeSanitize from 'rehype-sanitize'
import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'

// Allow raw HTML in markdown (use with caution)
<Markdown rehypePlugins={[rehypeRaw]}>
  {'<div class="custom">**Bold inside div**</div>'}
</Markdown>
// Output: <div class="custom"><strong>Bold inside div</strong></div>

// Sanitize output for extra security
<Markdown rehypePlugins={[rehypeSanitize]}>
  {'# Safe content'}
</Markdown>

// Math rendering with KaTeX
<Markdown
  remarkPlugins={[remarkMath]}
  rehypePlugins={[rehypeKatex]}
>
  {'The equation $E = mc^2$ is famous.'}
</Markdown>

// Multiple plugins combined
<Markdown
  remarkPlugins={[remarkGfm, remarkMath]}
  rehypePlugins={[rehypeRaw, rehypeKatex]}
>
  {complexMarkdownWithMathAndTables}
</Markdown>
```

--------------------------------

### Customize react-markdown Components

Source: https://github.com/remarkjs/react-markdown/blob/main/readme.md

Demonstrates how to customize the HTML elements rendered by react-markdown. You can map markdown elements like 'h1' to different HTML tags or provide custom React components with specific props. This allows for fine-grained control over the rendering of markdown content.

```javascript
<Markdown
  components={{
    // Map `h1` (`# heading`) to use `h2`s.
    h1: 'h2',
    // Rewrite `em`s (`*like so*`) to `i` with a red foreground color.
    em(props) {
      const {node, ...rest} = props
      return <i style={{color: 'red'}} {...rest} />
    }
  }}
/>
```

--------------------------------

### Render Markdown with Hooks using MarkdownHooks

Source: https://context7.com/remarkjs/react-markdown/llms.txt

A client-side component that handles asynchronous plugins with React hooks. It supports a fallback prop to display content while plugins are processing.

```jsx
import {MarkdownHooks} from 'react-markdown'
import rehypeStarryNight from 'rehype-starry-night'

function CodeViewer({code}) {
  return (
    <MarkdownHooks
      fallback={<div>Loading syntax highlighting...</div>}
      rehypePlugins={[rehypeStarryNight]}
    >
      {code}
    </MarkdownHooks>
  )
}

<CodeViewer code="```python\nprint('Hello World')\n```" />

<MarkdownHooks rehypePlugins={[rehypeStarryNight]}>
  {'# Title\n\nContent here'}
</MarkdownHooks>
```

--------------------------------

### Render Markdown Asynchronously with MarkdownAsync

Source: https://context7.com/remarkjs/react-markdown/llms.txt

A component designed for server-side rendering that supports asynchronous plugins. It is ideal for tasks like server-side syntax highlighting.

```jsx
import {MarkdownAsync} from 'react-markdown'
import {renderToPipeableStream} from 'react-dom/server'
import rehypeStarryNight from 'rehype-starry-night'

const code = '```js\nconsole.log("Hello")\n```'

renderToPipeableStream(
  <MarkdownAsync
    rehypePlugins={[rehypeStarryNight]}
  >
    {code}
  </MarkdownAsync>
).pipe(response)

const markdown = '# Async Rendered\n\nThis content is rendered asynchronously.'
<MarkdownAsync>{markdown}</MarkdownAsync>
```

--------------------------------

### Handle Line Endings in react-markdown

Source: https://github.com/remarkjs/react-markdown/blob/main/readme.md

Explains the correct way to handle line endings when passing markdown strings to react-markdown, especially within JSX. It recommends using template literals and passing the markdown as a single child expression to avoid issues with whitespace collapsing.

```javascript
// If you write actual markdown in your code, put your markdown in a variable;
// **do not indent markdown**:
const markdown = `
# This is perfect!
`

// Pass the value as an expression as an only child:
const result = <Markdown>{markdown}</Markdown>
```

```javascript
<Markdown>{`
# Hi

This is a paragraph.
`}</Markdown>
```

--------------------------------

### Customize Rendering with the components Option

Source: https://context7.com/remarkjs/react-markdown/llms.txt

The components option in react-markdown allows you to map HTML tag names to custom React components or functions. This provides complete control over how markdown elements are rendered, enabling simple tag replacements, complex custom logic, or integration with libraries like syntax highlighters.

```jsx
import Markdown from 'react-markdown'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'

// Simple tag replacement
<Markdown components={{h1: 'h2'}}>{'# This becomes h2'}</Markdown>
// Output: <h2>This becomes h2</h2>

// Custom component function
<Markdown
  components={{
    em({node, children, ...props}) {
      return <i style={{color: 'red'}} {...props}>{children}</i>
    },
    a({node, href, children, ...props}) {
      return <a href={href} target="_blank" rel="noopener" {...props}>{children}</a>
    }
  }}
>
  {'*emphasized* and [link](https://example.com)'}
</Markdown>

// Syntax highlighting with custom code component
<Markdown
  components={{
    code({node, className, children, ...props}) {
      const match = /language-(\w+)/.exec(className || '')
      return match ? (
        <SyntaxHighlighter
          style={dark}
          language={match[1]}
          PreTag="div"
        >
          {String(children).replace(/\n$/, '')}
        </SyntaxHighlighter>
      ) : (
        <code className={className} {...props}>{children}</code>
      )
    }
  }}
>
  {'```javascript\nconst greeting = "Hello";\n```'}
</Markdown>

// Access node information (position, properties)
<Markdown
  components={{
    p({node, children}) {
      console.log('Position:', node.position)
      return <p data-line={node.position?.start.line}>{children}</p>
    }
  }}
>
  {'Paragraph text'}
</Markdown>
```

--------------------------------

### Filter elements with allowElement

Source: https://context7.com/remarkjs/react-markdown/llms.txt

The allowElement prop provides a function to programmatically include or exclude specific markdown elements based on their properties or tags. It is useful for security filtering, such as blocking external links or specific media types.

```jsx
import Markdown from 'react-markdown'

// Filter based on element properties
<Markdown
  allowElement={(element, index, parent) => {
    // Block images
    if (element.tagName === 'img') return false
    // Block external links
    if (element.tagName === 'a' && element.properties.href?.startsWith('http')) {
      return false
    }
    return true
  }}
>
  {'![Image](pic.jpg)\n\n[External](https://example.com)\n\n[Internal](/page)'}
</Markdown>

// Combined with allowedElements
<Markdown
  allowedElements={['p', 'a', 'strong']}
  allowElement={(element) => {
    // Additional filtering on allowed elements
    if (element.tagName === 'a') {
      return element.properties.href !== '/blocked'
    }
    return true
  }}
>
  {'[OK](/page) and [Blocked](/blocked)'}
</Markdown>
```

--------------------------------

### Define Components Mapping for react-markdown

Source: https://github.com/remarkjs/react-markdown/blob/main/readme.md

The Components type allows mapping HTML tag names to custom React components. It accepts standard element properties along with extra properties provided by the library.

```typescript
import type {ExtraProps} from 'react-markdown'
import type {ComponentProps, ElementType} from 'react'

type Components = {
  [Key in Extract<ElementType, string>]?: ElementType<ComponentProps<Key> & ExtraProps>
}
```

--------------------------------

### Transform URLs with urlTransform

Source: https://context7.com/remarkjs/react-markdown/llms.txt

The urlTransform prop allows modification of all URLs within the markdown output. It is commonly used for prefixing paths, proxying assets, or stripping specific attributes for security.

```jsx
import Markdown from 'react-markdown'

// Prefix all URLs with a base path
<Markdown
  urlTransform={(url, key, node) => {
    if (url.startsWith('/')) {
      return `/docs${url}`
    }
    return url
  }}
>
  {'[Link](/page) and ![Image](/img.png)'}
</Markdown>

// Proxy images through a service
<Markdown
  urlTransform={(url, key, node) => {
    if (key === 'src' && node.tagName === 'img') {
      return `https://proxy.example.com/?url=${encodeURIComponent(url)}`
    }
    return url
  }}
>
  {'![Photo](https://external.com/photo.jpg)'}
</Markdown>

// Remove all images by returning null for src
<Markdown
  urlTransform={(url, key, node) => {
    if (key === 'src') return null
    return url
  }}
>
  {'![Removed](photo.jpg)\n\n[Kept](link)'}
</Markdown>
```

--------------------------------

### Sanitize URLs with defaultUrlTransform

Source: https://context7.com/remarkjs/react-markdown/llms.txt

A utility function that enforces security by blocking dangerous protocols like 'javascript:' while allowing safe web and mail protocols.

```javascript
import Markdown, {defaultUrlTransform} from 'react-markdown'

// Default behavior - unsafe URLs are blocked
<Markdown>{'[Click me](javascript:alert(1))'}</Markdown>

<Markdown>{'[Safe link](https://example.com)'}</Markdown>

// Using defaultUrlTransform directly
defaultUrlTransform('https://example.com')    // Returns: 'https://example.com'
defaultUrlTransform('javascript:alert(1)')    // Returns: ''
defaultUrlTransform('/relative/path')         // Returns: '/relative/path'
defaultUrlTransform('mailto:user@example.com') // Returns: 'mailto:user@example.com'
```

--------------------------------

### Filter HTML Elements with allowedElements / disallowedElements

Source: https://context7.com/remarkjs/react-markdown/llms.txt

Control which HTML elements are included in the output using the allowedElements and disallowedElements options. Only one of these options can be used at a time. The unwrapDisallowed option can be used in conjunction to keep the content of disallowed elements.

```jsx
import Markdown from 'react-markdown'

// Only allow specific elements (others are removed)
<Markdown allowedElements={['p', 'strong', 'em']}>
  {'# Heading\n\n**Bold** and *italic* in paragraph'}
</Markdown>
// Output: <p><strong>Bold</strong> and <em>italic</em> in paragraph</p>
// Note: h1 is dropped entirely

// Disallow specific elements
<Markdown disallowedElements={['em', 'strong']}>
  {'**Bold** and *italic* text'}
</Markdown>
// Output: <p> and  text</p>

// Unwrap disallowed elements (keep children)
<Markdown disallowedElements={['em']} unwrapDisallowed>
  {'# *Title*'}
</Markdown>
// Output: <h1>Title</h1>
// Note: em is removed but "Title" text is preserved

// Using allowedElements with unwrapDisallowed
<Markdown allowedElements={['h1']} unwrapDisallowed>
  {'# *Styled* heading'}
</Markdown>
// Output: <h1>Styled heading</h1>
```

--------------------------------

### Handle HTML with skipHtml

Source: https://context7.com/remarkjs/react-markdown/llms.txt

The skipHtml boolean prop controls whether raw HTML found in markdown is escaped or removed entirely. This is essential for preventing XSS attacks when rendering untrusted content.

```jsx
import Markdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'

// Default behavior - HTML is escaped
<Markdown>{'<div>HTML content</div>'}</Markdown>

// With skipHtml - HTML is removed entirely
<Markdown skipHtml>{'Text <i>with</i> inline HTML'}</Markdown>

// Comparison with rehype-raw (allows HTML)
<Markdown rehypePlugins={[rehypeRaw]}>{'<div>Allowed</div>'}</Markdown>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.