React Markdown Preview

The MarkdownPreview component is the primary entrypoint for rendering markdown with preview capabilities. It is a forward-ref component that accepts MarkdownPreviewProps and allows you to customize the rendering pipeline via rehypePlugins.

By default, it includes several plugins to handle raw HTML, metadata retrieval, and syntax highlighting via rehype-prism-plus. You can extend this behavior by providing your own plugins through the rehypePlugins prop.

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

function MyComponent() {
  return (
    <MarkdownPreview 
      codeEditable={true} 
      rehypePlugins={[]} // Add custom rehype plugins here
    />
  );
}

The MarkdownPreviewProps interface defines the configuration options for the MarkdownPreview component. It extends the standard Options from react-markdown (excluding children) and adds UI-specific controls for styling, behavior, and plugin manipulation.

interface MarkdownPreviewProps extends Omit<Options, 'children'> {
  prefixCls?: string;
  className?: string;
  source?: string;
  disableCopy?: boolean;
  style?: React.CSSProperties;
  pluginsFilter?: (type: 'rehype' | 'remark', plugin: PluggableList) => PluggableList;
  wrapperElement?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
    'data-color-mode'?: 'light' | 'dark';
  };
  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
  onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
  rehypeRewrite?: RehypeRewriteOptions['rewrite'];
}

To control the color mode (light or dark) of the preview container, use the wrapperElement prop. This prop accepts a React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> object and supports a 'data-color-mode' attribute.

<MarkdownPreview
  source="# Hello"
  wrapperElement={{
    'data-color-mode': 'dark'
  }}
/>

The pluginsFilter prop allows you to intercept and modify the remark or rehype plugin lists before they are processed. This is useful for dynamically adding, removing, or altering plugins based on the component's lifecycle or configuration.

// Example usage of pluginsFilter
pluginsFilter: (type, plugins) => {
  if (type === 'rehype') {
    // return modified rehype plugins list
  }
  return plugins;
}

The rehypeRewrite prop allows you to provide a rewrite function (compatible with rehype-rewrite) to manipulate the generated HTML structure during the rehype phase.

rehypeRewrite: (h, tree, root) => {
  // logic to manipulate the HTML tree
}

The MarkdownPreview component includes built-in support for rehype-rewrite to manipulate the generated HTML. You can control this behavior using the following props:

• disableCopy: A boolean that, when set to true, influences how rehype-rewrite handles content (internally passed to rehypeRewriteHandle).
• rehypeRewrite: An object passed to rehype-rewrite to define custom rewriting logic.

These options are applied automatically within the internal plugin pipeline before any user-provided rehypePlugins.

<MarkdownPreview 
  disableCopy={true} 
  rehypeRewrite={{ 
    // Custom rewrite logic configuration
  }} 
/>

The defaultRehypePlugins array contains the standard set of rehype plugins used by the library to process the HTML tree generated from Markdown. These include:

• rehype-slug: Automatically adds id attributes to headings.
• rehype-autolink-headings: Adds anchor links to headings.
• rehype-ignore: Allows ignoring specific parts of the content.

export const defaultRehypePlugins: PluggableList = [slug, headings, rehypeIgnore];