### Install React Markdown Preview

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/README.md

Install the package using npm. This is the initial step before using the component in your project.

```bash
$ npm install @uiw/react-markdown-preview --save
```

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

### LESS Customization Setup

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/Styling.md

Install LESS as a development dependency to customize the source LESS files. Import the library's styles after defining custom theme variables.

```bash
npm install --save-dev less
```

```less
// Custom theme
@wmde-text-color: #333;
@wmde-bg-color: #fff;
@wmde-border-color: #ddd;

// Import the library's styles
@import '@uiw/react-markdown-preview/src/styles/markdown.less';
```

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

### Install KaTeX for Math Rendering

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/core/README.md

Install the KaTeX package using npm to enable mathematical expression rendering. This is a prerequisite for using the custom KaTeX preview feature.

```bash
npm install katex
```

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

### Full-Featured Markdown Preview Setup

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

A comprehensive setup for MarkdownPreview including custom classes, inline styles, event handlers, and security plugins. Ensure all necessary imports and handlers are defined.

```jsx
import MarkdownPreview from '@uiw/react-markdown-preview';
import rehypeSanitize from 'rehype-sanitize';

<MarkdownPreview
  source={markdown}
  prefixCls="custom-markdown"
  className="content-area"
  style={{
    padding: '20px',
    fontSize: '16px',
    lineHeight: '1.6',
  }}
  disableCopy={false}
  wrapperElement={{ 'data-color-mode': 'dark' }}
  rehypePlugins={[rehypeSanitize]}
  skipHtml={false}
  onScroll={handleScroll}
  onMouseOver={handleMouseOver}
/>
```

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

### Run Development Server

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/README.md

Starts the project in development mode, watching for component compilation and running the preview website instance.

```bash
npm run start
npm run doc
```

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

### Development Build Commands

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/core/README.md

Commands to run the project in development mode. `npm run start` compiles components and watches for changes, while `npm run doc` starts the preview website.

```bash
# Step 1, run first,
# listen to the component compile and output the .js file
# listen for compilation output type .d.ts file
# listen to the component compile and output the .css file
npm run start
# Step 2, development mode, listen to compile preview website instance
npm run doc
```

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

### Container Classes Example

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/Styling.md

Demonstrates the structure of the main wrapper div, including base, color scheme, and optional user-provided classes.

```html
<div class="wmde-markdown wmde-markdown-color custom-class">
  <!-- Content -->
</div>
```

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

### Complete Markdown Example

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

A comprehensive example showcasing various Markdown elements including headings, text formatting, links, images, blockquotes, code blocks, task lists, tables, alerts, nested lists, and horizontal rules.

```markdown
# My Document

This is an introductory paragraph with **bold text** and *italic text*.

## Introduction

Here's a [link](https://example.com) and an image:

![Alt text](image.jpg)

> This is important information.

## Code Example

\`\`\`javascript {1,3}
const greeting = 'Hello';
const name = 'World';
console.log(greeting + name);
\`\`\`

## Task List

- [x] Completed task
- [ ] Incomplete task

## Table

| Column 1 | Column 2 |
|----------|----------|
| Data 1   | Data 2   |

## Alert

> [!WARNING]
> This requires attention!

## Nested List

1. First item
   - Nested bullet
   - Another nested
2. Second item

---

Footer content
```

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

### RetrieveMeta Plugin Example Transformation (Before)

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/RehypeMetaPlugins.md

Illustrates the structure of a code node before the retrieveMeta plugin is applied, showing metadata in properties.

```javascript
{ 
  type: 'element',
  tagName: 'code',
  properties: {
    className: ['language-javascript'],
    dataMeta: 'title=example.js {1,3}'
  },
  children: [...] 
}
```

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

### Markdown Syntax Guide

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/README.md

A guide detailing the supported Markdown syntax, including standard features, GitHub Flavored Markdown (GFM), GitHub alerts, custom syntax extensions, and code language support.

```APIDOC
## Markdown Syntax Guide

### Description
This guide outlines the Markdown syntax supported by `@uiw/react-markdown-preview`. It covers standard Markdown features, GitHub Flavored Markdown (GFM) extensions, custom syntax like line highlighting, and details on code language support.

### Supported Features
- Standard Markdown elements (headings, lists, emphasis, etc.)
- GFM features (tables, task lists, strikethrough)
- GitHub alerts (NOTE, TIP, WARNING, etc.)
- Custom syntax (e.g., line highlighting, comments for styling)
- Code block language specification for syntax highlighting

### Examples
Refer to the [markdown-syntax.md](markdown-syntax.md) file for comprehensive examples of each supported syntax feature.
```

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

### Basic Markdown Preview

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

Renders an empty div with default styles when no props are provided. Use this for a minimal setup.

```jsx
<MarkdownPreview />
```

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

### Production Setup with Security

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

Configures MarkdownPreview for production by enabling HTML sanitization and disabling raw HTML rendering. Import `rehypeSanitize` for security.

```jsx
import MarkdownPreview from '@uiw/react-markdown-preview';
import rehypeSanitize from 'rehype-sanitize';

<MarkdownPreview
  source={userProvidedMarkdown}
  rehypePlugins={[rehypeSanitize]}
  skipHtml={true}
/>
```

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

### ReservedMeta Plugin Example Transformation (Before)

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/RehypeMetaPlugins.md

Illustrates the structure of a code node before the reservedMeta plugin is applied, showing metadata in the data object.

```javascript
{ 
  type: 'element',
  tagName: 'code',
  properties: {
    className: ['language-javascript']
  },
  data: {
    meta: '{1,3}'
  },
  children: [...] 
}
```

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

### Line Highlighting Metadata Example

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/RehypeMetaPlugins.md

Demonstrates how metadata in code fences, like `{1,3-5}`, is used for line highlighting by Prism.

```markdown
```javascript {1,3-5}
const x = 1;
const y = 2;
const z = 3;
```
```

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

### Configuring Remark and Rehype Plugins

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/types.md

Example of how to define `PluggableList` for `remarkPlugins` and `rehypePlugins`, including direct plugin usage and plugins with options.

```typescript
import remarkGfm from 'remark-gfm';
import rehypeSanitize from 'rehype-sanitize';

const rehypePlugins: PluggableList = [
  rehypeSanitize,
  [rehypeSanitize, { /* options */ }],
];

const remarkPlugins: PluggableList = [
  remarkGfm,
];
```

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

### React Markdown Preview: User Preference

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/Styling.md

This example demonstrates how to manually control the theme based on user preference, detected via `window.matchMedia`. It uses `useState` and `useEffect` to manage the theme state.

```jsx
import { useState, useEffect } from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';

function App() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    setIsDark(dark);
  }, []);

  return (
    <MarkdownPreview
      source="# Content"
      wrapperElement={{
        'data-color-mode': isDark ? 'dark' : 'light'
      }}
    />
  );
}
```

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

### Support Custom KaTeX Preview

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/README.md

Integrate KaTeX for rendering mathematical expressions. This example shows how to use KaTeX for inline math and code blocks marked with `KaTeX`.

```bash
npm install katex
```

```jsx
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';
import { getCodeString } from 'rehype-rewrite';
import katex from 'katex';
import 'katex/dist/katex.css';

const source = `This is to display the 
\
```$$\\c = \\pm\\sqrt{a^2 + b^2}$$$
 in one line

\
```KaTeX
c = \\pm\\sqrt{a^2 + b^2}
```
`;

export default function Demo() {
  const [value, setValue] = React.useState(source);
  return (
    <MarkdownPreview
      source={source}
      style={{ padding: 16 }}
      components={{
        code: ({ children = [], className, ...props }) => {
          if (typeof children === 'string' && /^\
$$\\$(.*)\\$$
/.test(children)) {
            const html = katex.renderToString(children.replace(/^\
$$\\$(.*)\\$$
/, '$1'), {
              throwOnError: false,
            });
            return <code dangerouslySetInnerHTML={{ __html: html }} style={{ background: 'transparent' }} />;
          }
          const code = props.node && props.node.children ? getCodeString(props.node.children) : children;
          if (
            typeof code === 'string' &&
            typeof className === 'string' &&
            /^language-katex/.test(className.toLocaleLowerCase())
          ) {
            const html = katex.renderToString(code, {
              throwOnError: false,
            });
            return <code style={{ fontSize: '150%' }} dangerouslySetInnerHTML={{ __html: html }} />;
          }
          return <code className={String(className)}>{children}</code>;
        },
      }}
    />
  );
}
```

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

### Custom Code Block Attributes Example

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/RehypeMetaPlugins.md

Shows how metadata, such as `title="example.js"`, can be parsed from code fences for custom rendering.

```markdown
```js title="example.js"
const code = true;
```
```

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

### Custom CSS for Code Blocks

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/NoHighlightMarkdownPreview.md

Provides example CSS to style code blocks, including styling for the `code` and `pre` elements.

```css
code {
  background-color: #f5f5f5;
  padding: 2px 4px;
  font-family: monospace;
}

pre {
  background-color: #f9f9f9;
  padding: 12px;
  overflow-x: auto;
  border: 1px solid #ddd;
}
```

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

### Rendered Custom Markdown Style Attributes

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

Example of how the styled Markdown renders as HTML.

```html
<h2 style="color: red; font-size: 24px;">Styled Title</h2>
```

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

### RetrieveMeta Plugin Example Transformation (After)

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/RehypeMetaPlugins.md

Illustrates the structure of a code node after the retrieveMeta plugin is applied, showing metadata moved to the data object.

```javascript
{ 
  type: 'element',
  tagName: 'code',
  properties: {
    className: ['language-javascript']
    // dataMeta removed
  },
  data: {
    meta: 'title=example.js {1,3}'
  },
  children: [...] 
}
```

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

### ReservedMeta Plugin Example Transformation (After)

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/RehypeMetaPlugins.md

Illustrates the structure of a code node after the reservedMeta plugin is applied, showing metadata moved to HTML properties.

```javascript
{ 
  type: 'element',
  tagName: 'code',
  properties: {
    className: ['language-javascript'],
    'data-meta': '{1,3}'
  },
  data: {
    meta: '{1,3}'
  },
  children: [...] 
}
```

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

### Default Styling Example

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

Shows the default rendering of MarkdownPreview without any custom class names. The component applies its base classes automatically.

```jsx
<MarkdownPreview source="Content" />
// Renders: <div class="wmde-markdown wmde-markdown-color "></div>
```

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

### Inline Styling Example

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

Applies inline styles directly to the MarkdownPreview component using the `style` prop for fine-grained visual adjustments.

```jsx
<MarkdownPreview
  source="# Markdown"
  style={{
    padding: '20px',
    fontSize: '16px',
    lineHeight: '1.6',
    maxWidth: '800px',
    margin: '0 auto',
    backgroundColor: '#f9f9f9',
    borderRadius: '8px',
  }}
/>
```

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

### Unicode Characters in Markdown

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

Shows examples of Unicode characters that can be directly included in Markdown.

```markdown
© ® ™ € £
```

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

### GitHub Alerts Markdown Examples

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/OVERVIEW.md

Demonstrates the usage of GitHub Flavored Markdown (GFM) alerts for notes, warnings, important information, tips, and cautions.

```markdown
> [!NOTE]
> Informational note

> [!WARNING]
> Warning message

> [!IMPORTANT]
> Important information

> [!TIP]
> Helpful tip

> [!CAUTION]
> Caution message
```

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

### Example Custom Component Mapping

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/types.md

Demonstrates how to override default component rendering for Markdown elements like links and code blocks using the `components` prop.

```typescript
import MarkdownPreview from '@uiw/react-markdown-preview';

<MarkdownPreview
  source="[Link](https://example.com)"
  components={{
    a: ({ href, children }) => (
      <a href={href} target="_blank" rel="noopener noreferrer">
        {children} ↗
      </a>
    ),
    code: ({ node, inline, children, ...props }) => (
      <code style={{ background: '#f0f0f0', padding: '2px 4px' }} {...props}>
        {children}
      </code>
    ),
  }}
/>
```

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

### Common Markdown Preview TypeScript Usage

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/CommonMarkdownPreview.md

Demonstrates how to import and configure the MarkdownPreview component with basic props in TypeScript. This setup uses the common plugin stack.

```typescript
import MarkdownPreview, { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview/common';

const markdown: MarkdownPreviewProps = {
  source: '# Hello',
  disableCopy: false,
};
```

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

### Markdown AST Transformation Example (rehype-slug)

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/RehypePlugins.md

Illustrates how the rehype-slug plugin transforms a Markdown heading into an HTML element with a generated ID.

```markdown
## Hello World

```

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

### CSS for Visual Feedback

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/useCopied.md

Example CSS rules to provide visual feedback when code is copied. It toggles the visibility of copy and checkmark icons.

```css
.copied {
  position: relative;
  cursor: pointer;
}

.copied .octicon-copy {
  display: block;
}

.copied .octicon-check {
  display: none;
}

.copied.active .octicon-copy {
  display: none;
}

.copied.active .octicon-check {
  display: block;
  color: #28a745; /* Green checkmark */
}
```

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

### Custom KaTeX Preview

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/core/README.md

Integrate KaTeX for rendering mathematical expressions within your markdown. This example shows how to use the `components` prop to customize code block rendering for KaTeX.

```jsx
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';
import { getCodeString } from 'rehype-rewrite';
import katex from 'katex';
import 'katex/dist/katex.css';

const source = `This is to display the 
\
\\\$\\\$\\\c = \\pm\\\\sqrt{a^2 + b^2}\\\$\\\$\\\n in one line

\
\
\
```KaTeX
c = \pm\sqrt{a^2 + b^2}
```
`;

export default function Demo() {
  const [value, setValue] = React.useState(source);
  return (
    <MarkdownPreview
      source={source}
      style={{ padding: 16 }}
      components={{
        code: ({ children = [], className, ...props }) => {
          if (typeof children === 'string' && /^\\[\\(]{2}(.*)[\\(]{2}\\.test(children)) {
            const html = katex.renderToString(children.replace(/^\\[\\(]{2}(.*)[\\(]{2}, '$1'), {
              throwOnError: false,
            });
            return <code dangerouslySetInnerHTML={{ __html: html }} style={{ background: 'transparent' }} />;
          }
          const code = props.node && props.node.children ? getCodeString(props.node.children) : children;
          if (
            typeof code === 'string' &&
            typeof className === 'string' &&
            /^language-katex/.test(className.toLocaleLowerCase())
          ) {
            const html = katex.renderToString(code, {
              throwOnError: false,
            });
            return <code style={{ fontSize: '150%' }} dangerouslySetInnerHTML={{ __html: html }} />;
          }
          return <code className={String(className)}>{children}</code>;
        },
      }}
    />
  );
}
```

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

### Custom AST Rewriting Example

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/RehypePlugins.md

Demonstrates how to rewrite the Abstract Syntax Tree (AST) of markdown content. Use the `rehypeRewrite` prop to provide a function that modifies nodes, such as adding attributes to images or removing elements from headers.

```jsx
<MarkdownPreview
  source="## Title"
  rehypeRewrite={(node, index, parent) => {
    // Add custom attributes to images
    if (node.tagName === 'img') {
      node.properties = {
        ...node.properties,
        loading: 'lazy',
      };
    }
    
    // Remove external link icons from headers
    if (node.tagName === 'a' && parent?.tagName?.match(/^h[1-6]$/)) {
      // Modify the anchor node
    }
  }}
/>
```

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

### Custom Markdown Viewer with useCopied

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/useCopied.md

Example of how to use the useCopied hook in a custom React component to enable copy functionality for code blocks.

```jsx
import { useRef } from 'react';
import { useCopied } from '@uiw/react-markdown-preview';

function CustomMarkdownViewer({ markdown }) {
  const containerRef = useRef(null);

  // Enable copy functionality for code blocks
  useCopied(containerRef);

  return (
    <div ref={containerRef} className="markdown-content">
      {/* Rendered markdown with code blocks */}
    </div>
  );
}
```

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

### Custom Plugin Filter Example

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/RehypePlugins.md

Shows how to filter and add custom rehype plugins using the `pluginsFilter` prop. This allows for dynamic modification of the plugin stack based on the type of content being processed.

```jsx
<MarkdownPreview
  source="# Markdown"
  pluginsFilter={(type, plugins) => {
    if (type === 'rehype') {
      // Add custom rehype plugin
      return [...plugins, myCustomPlugin];
    }
    return plugins;
  }}
/>
```

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

### Usage Example for rehypeRewriteHandle

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/RehypePlugins.md

Demonstrates how to create a rewrite handler that disables copy buttons and includes custom transformations for image elements. This handler is then used with the rehype-rewrite plugin.

```typescript
import { rehypeRewriteHandle } from '@uiw/react-markdown-preview';

// Create a handler that disables copy buttons and adds custom transformations
const handler = rehypeRewriteHandle(true, (node, index, parent) => {
  // Custom transformation
  if (node.type === 'element' && node.tagName === 'img') {
    node.properties = { ...node.properties, alt: 'Processed Image' };
  }
});

// Use with rehype-rewrite
const rehypePlugins = [
  [rehypeRewrite, { rewrite: handler }],
];

```

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

### Custom Component Rendering for Links

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/MarkdownPreview.md

Allows customization of how specific HTML elements, like anchor tags (`<a>`), are rendered. This example opens links in a new tab with security attributes.

```jsx
<MarkdownPreview
  source="[Click me](https://example.com)"
  components={{
    a: ({ href, children }) => (
      <a href={href} target="_blank" rel="noopener noreferrer">
        {children}
      </a>
    ),
  }}
/>
```

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

### Markdown Preview with Custom Plugins

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/MarkdownPreview.md

Integrates custom rehype plugins, such as `rehype-sanitize`, for enhanced content processing and security. Ensure the plugin is installed and imported.

```jsx
import rehypeSanitize from 'rehype-sanitize';

<MarkdownPreview
  source="## Safe Content"
  rehypePlugins={[rehypeSanitize]}
/>
```

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

### MarkdownPreview Component

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/README.md

The main component for rendering Markdown with full syntax highlighting. It supports all props, return types, and provides usage examples for various features and configuration options.

```APIDOC
## MarkdownPreview Component

### Description
The `MarkdownPreview` component is the primary way to render Markdown content within your React application. It offers full syntax highlighting capabilities and supports a wide range of customization options.

### Usage
```jsx
import MarkdownPreview from '@uiw/react-markdown-preview';

function App() {
  return (
    <MarkdownPreview source="# Hello, Markdown!" />
  );
}
```

### Props
Refer to the [Configuration.md](configuration.md) document for a complete list of props, their types, default values, and descriptions.
```

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

### Backend Languages Code Snippets

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

Examples of embedding Python, Java, PHP, Ruby, Go, and Rust code within Markdown using fenced code blocks.

```markdown
\`\`\`python
print("Hello")
\`\`\`
```

```markdown
\`\`\`java
public class Hello {}
\`\`\`
```

```markdown
\`\`\`php
<?php echo "Hello"; ?>
\`\`\`
```

```markdown
\`\`\`ruby
puts "Hello"
\`\`\`
```

```markdown
\`\`\`go
fmt.Println("Hello")
\`\`\`
```

```markdown
\`\`\`rust
println!("Hello");
\`\`\`
```

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

### Import React Markdown Preview with No Highlighting

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

Import the '/nohighlight' entry point for the smallest bundle size when syntax highlighting is not required.

```javascript
import MarkdownPreview from '@uiw/react-markdown-preview/nohighlight';
// No syntax highlighting at all
```

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

### Bundle Size Optimization with Entry Points

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

Optimize bundle size by choosing the appropriate entry point for react-markdown-preview based on your needs: full features, common languages, or no highlighting.

```javascript
// Use the appropriate entry point for your needs
// In package.json:
{
  "dependencies": {
    "@uiw/react-markdown-preview": "^5.2.1"
  }
}

// Then import:
// - Default: ~90KB (gzipped) - for comprehensive language support
// - /common: ~40KB (gzipped) - for common languages
// - /nohighlight: ~25KB (gzipped) - minimal, no highlighting
```

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

### Build for Production

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/README.md

Builds the application for production, creating minified files with hashes. The output is ready for deployment.

```bash
npm run build
```

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

### Basic Markdown Preview Usage

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/website/public/bundle.html

Demonstrates the basic usage of the MarkdownPreview component. Import the component and provide a markdown string to the 'source' prop.

```javascript
import MarkdownPreview from '@uiw/react-markdown-preview';

const source = `## MarkdownPreview \n\n> todo: React component preview markdown text. `;

function Demo() {
  return (
    <MarkdownPreview source={source} />
  );
}

ReactDOM.render(<Demo />, document.getElementById('container'));
```

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

### Markdown Code Block with Highlighting Directive

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/RehypeMetaPlugins.md

Example of a markdown code block with a directive for line highlighting, processed by rehype-prism-plus.

```markdown
```javascript {1,3}
line 1
line 2
line 3
```
```

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

### NoHighlightMarkdownPreview for Small Bundle Size Applications

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/NoHighlightMarkdownPreview.md

Illustrates using NoHighlightMarkdownPreview in budget-constrained applications where minimizing bundle size is a priority. It shows how to apply custom styles.

```jsx
// For documentation or content-heavy apps where bundle size matters
import MarkdownPreview from '@uiw/react-markdown-preview/nohighlight';

function BudgetConstrainedApp() {
  return (
    <MarkdownPreview
      source="# Documentation\n\nThis is lightweight Markdown rendering."
      style={{ padding: '16px' }}
    />
  );
}
```

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

### Markup Languages Code Snippets

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

Examples of embedding Markdown and GraphQL code within Markdown using fenced code blocks.

```markdown
\`\`\`markdown
# Markdown
\`\`\`
```

```markdown
\`\`\`graphql
query {
  user(id: 1) { name }
}
\`\`\`
```

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

### Configuration Documentation

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/README.md

Comprehensive documentation on all configurable aspects of the react-markdown-preview library, including component props, styling options, plugin architecture, security, and event handlers.

```APIDOC
## Configuration Documentation

### Description
This section details all the configuration options available for `@uiw/react-markdown-preview`. It covers component props, styling customization, plugin integration, security settings, and event handling.

### Key Areas
- **Props**: All component properties, their types, default values, and descriptions.
- **Styling**: Guidance on CSS classes, dark mode, custom theming, and responsive design.
- **Plugins**: How to integrate and configure remark and rehype plugins.
- **Security**: Content security configuration options.
- **Events**: Setup for event handlers.

### Accessing Details
Refer to the [Configuration.md](configuration.md) file for in-depth information on each configuration aspect.
```

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

### Import React Markdown Preview for Common Languages

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

Import the '/common' entry point to reduce bundle size by limiting language highlighting to common languages.

```javascript
import MarkdownPreview from '@uiw/react-markdown-preview/common';
// Limited language highlighting for bundle size
```

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

### Basic MarkdownPreview Usage

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/MarkdownPreview.md

Demonstrates the basic usage of the MarkdownPreview component by importing it and rendering a simple Markdown string.

```jsx
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';

function App() {
  const markdown = `

```

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

### Markdown Content Ignoring Example (rehype-ignore)

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/RehypePlugins.md

Demonstrates how to use rehype-ignore comments to exclude specific content blocks from being rendered into HTML.

```markdown
<!--rehype:ignore:start-->
This content will not be rendered in HTML
<!--rehype:ignore:end-->

This content will be rendered

```

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

### React Markdown Preview: System Preference Only

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/Styling.md

Use this snippet to automatically switch the theme based on the user's system preference. Ensure the '@uiw/react-markdown-preview/markdown.css' is imported.

```jsx
import MarkdownPreview from '@uiw/react-markdown-preview';
import '@uiw/react-markdown-preview/markdown.css';

function App() {
  return <MarkdownPreview source="# Content" />;
  // Automatically switches based on system preference
}
```

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

### Code Highlighting with No Languages

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

Import from '@uiw/react-markdown-preview/nohighlight' for the smallest bundle size when syntax highlighting is not needed.

```jsx
import MarkdownPreview from '@uiw/react-markdown-preview/nohighlight';

<MarkdownPreview source="```js\nconst x = 1;\n```" />
```

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

### Import React Markdown Preview with Full Features

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

Import the default package for comprehensive language highlighting and all features. This is the standard import for full functionality.

```javascript
import MarkdownPreview from '@uiw/react-markdown-preview';
// Includes all language highlighting, all features
```

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

### Data Formats Code Snippets

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

Examples of embedding JSON, YAML, and XML code within Markdown using fenced code blocks.

```markdown
\`\`\`json
{ "key": "value" }
\`\`\`
```

```markdown
\`\`\`yaml
key: value
\`\`\`
```

```markdown
\`\`\`xml
<root>content</root>
\`\`\`
```

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

### Import CSS

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/README.md

Import the necessary CSS file to style the MarkdownPreview component.

```typescript
import '@uiw/react-markdown-preview/markdown.css';

```

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

### Scripting Languages Code Snippets

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

Examples of embedding Bash, Shell, and PowerShell code within Markdown using fenced code blocks.

```markdown
\`\`\`bash
echo "Hello"
\`\`\`
```

```markdown
\`\`\`shell
#!/bin/bash
echo "Hello"
\`\`\`
```

```markdown
\`\`\`powershell
Write-Host "Hello"
\`\`\`
```

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

### When to Use NoHighlightMarkdownPreview

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/NoHighlightMarkdownPreview.md

Provides guidance on the appropriate use cases for NoHighlightMarkdownPreview, emphasizing scenarios where bundle size is critical and syntax highlighting is unnecessary. It also contrasts with when to use other MarkdownPreview variants.

```jsx
// ✓ Use when:
// - Rendering documentation without code examples
// - Bundle size is a critical constraint
// - You're rendering Markdown with minimal code blocks
// - You don't need syntax highlighting at all

import MarkdownPreview from '@uiw/react-markdown-preview/nohighlight';

// ✗ Don't use when:
// - You need syntax highlighting (use default MarkdownPreview)
// - You need line numbers or line highlighting (use default MarkdownPreview)
// - You want to reduce bundle size moderately (use CommonMarkdownPreview)

```

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

### Web Development Code Snippets

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

Examples of embedding HTML, CSS, JavaScript, and TypeScript code within Markdown using fenced code blocks.

```markdown
\`\`\`html
<div>HTML</div>
\`\`\`
```

```markdown
\`\`\`css
.class { color: red; }
\`\`\`
```

```markdown
\`\`\`javascript
const x = 1;
\`\`\`
```

```markdown
\`\`\`typescript
const x: number = 1;
\`\`\`
```

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

### Importing from Variants

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/types.md

Illustrates importing the component and its types from specific variant paths, such as 'common' or 'nohighlight'.

```typescript
// From variants
import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview/common';
import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview/nohighlight';
```

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

### Importing Pre-built CSS

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/Styling.md

Import the default CSS file to apply all built-in styles for Markdown elements, color modes, and interactive features.

```javascript
import '@uiw/react-markdown-preview/markdown.css';
```

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

### Importing with Component

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/types.md

Shows how to import both the default component export and its associated types.

```typescript
// With component
import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
```

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

### Customize Markdown Rendering in ReactMarkdownPreview

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

Example of customizing the rendering of specific Markdown elements like headings and code blocks by passing a 'components' prop to MarkdownPreview.

```jsx
<MarkdownPreview
  source={markdown}
  components={{
    h1: ({ children }) => (
      <h1 style={{ color: 'blue' }}>{children}</h1>
    ),
    code: ({ children, className }) => (
      <code style={{ background: '#f0f0f0' }}>
        {children}
      </code>
    ),
  }}
/>
```

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

### Basic Usage of NoHighlightMarkdownPreview

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/NoHighlightMarkdownPreview.md

Demonstrates the basic usage of the NoHighlightMarkdownPreview component by rendering a Markdown string with a code block and a table.

```jsx
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview/nohighlight';

function App() {
  const markdown = `
# Documentation

Here's some code:

\`\`\`javascript
const greeting = 'Hello, World!';
console.log(greeting);
\`\`\`

And here's a table:

| Language | Hello |
|----------|-------|
| JS | console.log('Hello') |
| Python | print('Hello') |
`;

  return (
    <MarkdownPreview source={markdown} />
  );
}

export default App;
```

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

### Markdown Preview with Custom Link Component

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/OVERVIEW.md

Demonstrates how to customize the rendering of links by providing a custom React component for the 'a' tag.

```jsx
<MarkdownPreview
  source="[Link](url)"
  components={{
    a: ({ href, children }) => (
      <a href={href} target="_blank">
        {children} ↗
      </a>
    ),
  }}
/>
```

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

### Accessing Markdown Preview DOM Element via Ref

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/types.md

Demonstrates how to use `useRef` to get a reference to the `MarkdownPreviewRef` and access the underlying DOM element for the markdown container.

```typescript
import { useRef } from 'react';
import MarkdownPreview, { MarkdownPreviewRef } from '@uiw/react-markdown-preview';

function MyComponent() {
  const ref = useRef<MarkdownPreviewRef>(null);

  const handleClick = () => {
    if (ref.current?.mdp.current) {
      const element = ref.current.mdp.current;
      console.log('Markdown container:', element);
      console.log('Scroll height:', element.scrollHeight);
    }
  };

  return (
    <>
      <MarkdownPreview ref={ref} source="# Content" />
      <button onClick={handleClick}>Log Container Info</button>
    </>
  );
}
```

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

### Markdown Preview with Custom Styling

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/OVERVIEW.md

Demonstrates how to apply custom inline styles and a custom CSS class prefix to the MarkdownPreview component.

```jsx
<MarkdownPreview
  source="# Content"
  prefixCls="custom-markdown"
  style={{ padding: '20px', fontSize: '16px' }}
/>
```

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

### Component Exports Comparison

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/INDEX.md

Illustrates the different export options for the MarkdownPreview component based on their highlighting capabilities and intended use cases.

```text
@uiw/react-markdown-preview
├── Default (full highlighting)
├── /common (curated languages)
└── /nohighlight (no highlighting)
```

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

### Code Highlighting with Common Languages

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

Import from '@uiw/react-markdown-preview/common' for a smaller bundle size, supporting only common languages.

```jsx
import MarkdownPreview from '@uiw/react-markdown-preview/common';

<MarkdownPreview source="```js\nconst x = 1;\n```" />
```

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

### Choosing Between CommonMarkdownPreview and Default MarkdownPreview

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/CommonMarkdownPreview.md

Illustrates the decision-making process for selecting between CommonMarkdownPreview (for common languages) and the default MarkdownPreview (for extensive language support) based on application needs and bundle size considerations.

```javascript
// If your app primarily uses JavaScript, Python, and basic web languages:
import MarkdownPreview from '@uiw/react-markdown-preview/common';

// If your app shows code in obscure or specialized languages (Rust, Go, Haskell, etc.):
import MarkdownPreview from '@uiw/react-markdown-preview';
```

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

### Ignore Content in Markdown

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

Use <!--rehype:ignore:start--> and <!--rehype:ignore:end--> comments to hide content from the rendered output. This is useful for source-only content or temporary comments.

```markdown
<!--rehype:ignore:start-->
This content will not appear in the rendered output.
<!--rehype:ignore:end-->

This content will appear.
```

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

### Line Highlighting Syntax

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/OVERVIEW.md

Demonstrates the syntax for highlighting specific lines within code blocks. Use comma-separated numbers for individual lines and hyphens for ranges.

```markdown
```js {1,3-5}
```

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

### Upgrade Command

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/OVERVIEW.md

Provides the npm command to update the @uiw/react-markdown-preview package to the latest version 5.x.

```bash
npm update @uiw/react-markdown-preview@^5
```

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

### Ignore Content with HTML Comments

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/README.md

Content enclosed within `<!--rehype:ignore:start-->` and `<!--rehype:ignore:end-->` HTML comments will be ignored during rendering. This is useful for hiding content in the rendered output while keeping it in the source.

```jsx
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';

const source = `
<!--rehype:ignore:start-->
Content ignored
<!--rehype:ignore:end-->
Some content is ignored, please check the source code
`;

export default function Demo() {
  return (
    <MarkdownPreview
      source={source}
      style={{ padding: 16 }}
      rehypeRewrite={(node, index, parent) => {
        if (node.tagName === "a" && parent && /^h(1|2|3|4|5|6)/.test(parent.tagName)) {
          parent.children = parent.children.slice(1)
        }
      }}
    />
  );
}
```

```md
<!--rehype:ignore:start-->Ignored content<!--rehype:ignore:end-->
```

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

### GFM Tables

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

Create tables with headers and cells.

```markdown
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
```

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

### Markdown Preview with Configuration

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/README.md

Utilize the MarkdownPreview component with various configuration props for customization, including styling, disabling copy functionality, skipping HTML, and applying rehype plugins.

```jsx
<MarkdownPreview
  source={markdown}
  className="custom-class"
  style={{ padding: '20px', maxWidth: '800px' }}
  wrapperElement={{ 'data-color-mode': 'dark' }}
  disableCopy={false}
  skipHtml={true}
  rehypePlugins={[sanitizePlugin]}
/>

```

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

### GitHub Alerts - TIP

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

Special blockquote syntax for alert boxes. Use for helpful tips or suggestions.

```markdown
> [!TIP]
> This is a helpful tip or suggestion.
```

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

### Basic CommonMarkdownPreview Usage

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/CommonMarkdownPreview.md

Demonstrates the basic usage of the CommonMarkdownPreview component by rendering Markdown source with JavaScript and Python code blocks. Ensure you import the component from '@uiw/react-markdown-preview/common'.

```jsx
import React from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview/common';

function App() {
  const markdown = `
# Getting Started

\`\`\`javascript
const name = 'World';
console.log('Hello, ' + name);
\`\`\`

\`\`\`python
print("Hello, World!")
\`\`\`
`;

  return (
    <MarkdownPreview source={markdown} />
  );
}

export default App;
```

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

### Responsive Design with Clamp

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/Styling.md

Applies responsive padding and font sizes using CSS clamp() for fluid scaling.

```jsx
<MarkdownPreview
  source="# Responsive Content"
  style={{
    padding: 'clamp(12px, 5vw, 24px)',
    fontSize: 'clamp(14px, 2vw, 18px)',
    maxWidth: '100%',
  }}
/>
```

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

### Default Code Highlighting

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

Utilize the default configuration for full language support in code highlighting.

```jsx
import MarkdownPreview from '@uiw/react-markdown-preview';

<MarkdownPreview source="```js\nconst x = 1;\n```" />
```

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

### GFM Task Lists

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

Create task items with checkboxes. Renders as checkboxes (not interactive in preview).

```markdown
- [x] Completed task
- [ ] Incomplete task
- [x] Another completed task
```

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

### Named Imports for Component Types

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/types.md

Demonstrates how to import component-specific types using named imports from the main package.

```typescript
// Named imports
import { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';
```

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

### Markdown Rendering Pipeline

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/INDEX.md

Outlines the step-by-step process involved in rendering Markdown strings into HTML output, including the roles of various parsers and plugins.

```text
Markdown String
    ↓
react-markdown parser
    ↓
Remark plugins (text transformation)
    ↓
HAST (HTML Abstract Syntax Tree)
    ↓
Rehype plugins (tree transformation)
    ↓
rehypeRewrite (custom AST modifications)
    ↓
Syntax highlighting (rehypePrism)
    ↓
React components (custom rendering)
    ↓
HTML output
```

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

### Standard Markdown Unordered List Alternatives

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

Alternative syntaxes for unordered lists.

```markdown
* Item 1
* Item 2

+ Item 1
+ Item 2
```

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

### Webpack Configuration for React Markdown Preview

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

No special Webpack configuration is needed. Standard Webpack configurations work seamlessly with react-markdown-preview.

```javascript
// webpack.config.js
module.exports = {
  // Standard config works with react-markdown-preview
};
```

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

### Set Light Theme for Markdown Preview

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/README.md

Explicitly set the light theme for the MarkdownPreview component by passing `data-color-mode: 'light'` within the `wrapperElement` prop.

```diff
<MarkdownPreview
  source="Hello World!"
  wrapperElement={{
+    "data-color-mode": "light"
  }}
/>
```

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

### Apply Custom Styling to Markdown Preview

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/INDEX.md

Customize the appearance of the Markdown Preview by applying inline styles and CSS classes. Use the 'style' prop for direct styling and 'className' for custom CSS classes.

```jsx
<MarkdownPreview
  source="# Content"
  style={{ padding: '20px', fontSize: '16px' }}
  className="custom-class"
/>
```

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

### Import Markdown Preview CSS Separately

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

Import the markdown.css file separately if you need to manage styles independently from the JavaScript bundle.

```css
import '@uiw/react-markdown-preview/markdown.css';
// Import styling separately if needed
```

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

### Programmatically Toggle Theme

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

Control the theme (light/dark) of the markdown preview dynamically using component state.

```jsx
import { useState } from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <div>
      <button onClick={() => setIsDark(!isDark)}>
        Toggle Theme
      </button>
      <MarkdownPreview
        source="# Content"
        wrapperElement={{
          'data-color-mode': isDark ? 'dark' : 'light'
        }}
      />
    </div>
  );
}
```

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

### Standard Markdown Inline Links

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

Create links with text and optional titles.

```markdown
[Link text](https://example.com)

[Link with title](https://example.com "Title")
```

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

### Next.js Build Configuration

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

The default Next.js build configuration is compatible with react-markdown-preview. No custom modifications are typically required.

```javascript
// next.config.js
module.exports = {
  webpack: (config, options) => {
    return config;
  },
};
```

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

### Markdown Preview with Security (Sanitization)

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/OVERVIEW.md

Illustrates how to enhance security by using the rehypeSanitize plugin to process user-provided Markdown content.

```jsx
import MarkdownPreview from '@uiw/react-markdown-preview';
import rehypeSanitize from 'rehype-sanitize';

<MarkdownPreview
  source={userContent}
  rehypePlugins={[rehypeSanitize]}
/>
```

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

### Customizing CSS Prefix

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/Styling.md

Replaces the default 'wmde-markdown' prefix with a custom one using the 'prefixCls' prop for unique class naming.

```jsx
<MarkdownPreview
  prefixCls="my-markdown"
  source="# Content"
/>
```

```css
.my-markdown {
  font-size: 16px;
  line-height: 1.6;
}

.my-markdown h1 {
  font-size: 2em;
  margin-top: 0.67em;
}
```

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

### Import Default Export and Types

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/README.md

Import the default MarkdownPreview component along with its associated types for full highlighting functionality.

```typescript
import MarkdownPreview, {
  MarkdownPreviewProps,
  MarkdownPreviewRef
} from '@uiw/react-markdown-preview';

```

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

### Nested Lists in Markdown

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

Demonstrates how to create nested lists using indentation in Markdown. Supports both numbered and bulleted lists.

```markdown
1. First
   - Bullet under 1
   - Another bullet
2. Second
   - Bullet under 2
   1. Numbered under bullet
3. Third
```

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

### Use Markdown Preview with Security

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/INDEX.md

Integrate rehype-sanitize to sanitize user-generated markdown content, preventing XSS attacks. Ensure rehype-sanitize is imported.

```jsx
import rehypeSanitize from 'rehype-sanitize';
<MarkdownPreview
  source={userContent}
  rehypePlugins={[rehypeSanitize]}
/>
```

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

### TypeScript Integration

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/api-reference/NoHighlightMarkdownPreview.md

Illustrates the TypeScript import statement for the MarkdownPreview component and its associated types from the '@uiw/react-markdown-preview/nohighlight' package.

```typescript
import MarkdownPreview, { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview/nohighlight';

interface DocProps {
  title: string;
  markdown: MarkdownPreviewProps;
}
```

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

### TypeScript Usage with Props and Ref

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/OVERVIEW.md

Illustrates how to use the exported TypeScript types for props and refs with the MarkdownPreview component.

```typescript
import MarkdownPreview,
  MarkdownPreviewProps,
  MarkdownPreviewRef,
} from '@uiw/react-markdown-preview';

// Use props
const props: MarkdownPreviewProps = {
  source: '# Hello',
  disableCopy: false,
};

// Use ref
const ref = useRef<MarkdownPreviewRef>(null);
```

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

### Deprecated vs. New wrapperElement Prop

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/configuration.md

Demonstrates the correct usage of the `wrapperElement` prop, replacing the deprecated `warpperElement` (typo). The new prop takes precedence if both are provided.

```jsx
// ❌ Old (deprecated)
<MarkdownPreview warpperElement={{ className: 'custom' }} />

// ✓ New
<MarkdownPreview wrapperElement={{ className: 'custom' }} />
```

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

### React Markdown Preview - Raw HTML

Source: https://github.com/uiwjs/react-markdown-preview/blob/master/_autodocs/markdown-syntax.md

Enable rendering of raw HTML within Markdown. Disabled by default (`skipHtml: true`).

```jsx
<MarkdownPreview
  source="<div>HTML here</div>"
  skipHtml={false}
/>
```