### Complete Setup Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/quick-reference.md

A comprehensive example demonstrating the setup for syntax highlighting, Mermaid diagrams, and copyable code blocks.

```typescript
import { getOverrides } from 'mui-markdown';
import { Diagram } from 'mui-markdown/client';
import { Highlight, themes } from 'prism-react-renderer';

const overrides = getOverrides({
  Highlight, themes, prismTheme: themes.vsDark,
  enableMermaid: true, DiagramComponent: Diagram,
  copiable: true, showFileIcon: true
});

<MuiMarkdown overrides={overrides}>{markdown}</MuiMarkdown>
```

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

### Full Featured Setup

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/examples.md

Complete configuration with all features.

```typescript
import { MuiMarkdown, getOverrides } from 'mui-markdown';
import { Diagram } from 'mui-markdown/client';
import { Highlight, themes } from 'prism-react-renderer';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import CheckIcon from '@mui/icons-material/Check';

const overrides = getOverrides({
  Highlight,
  themes,
  prismTheme: themes.vsDark,
  enableMermaid: true,
  DiagramComponent: Diagram,
  mermaidConfig: { startOnLoad: true },
  copiable: true,
  showFileIcon: true,
  copyIcon: <ContentCopyIcon />,
  copiedIcon: <CheckIcon />,
  highlightColor: 'info.main',
  removedColor: 'error.main',
  insertedColor: 'success.main'
});

export const Documentation = ({ markdown }: { markdown: string }) => {
  return <MuiMarkdown overrides={overrides}>{markdown}</MuiMarkdown>;
};
```

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

### Minimal Setup

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/examples.md

Rendering markdown with default Material-UI styling, no syntax highlighting.

```typescript
import { MuiMarkdown } from 'mui-markdown';

export const BlogPost = ({ content }: { content: string }) => {
  return <MuiMarkdown>{content}</MuiMarkdown>;
};
```

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

### Development Server Commands

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/examples/nextjs13-typescript/README.md

Commands to start the development server using npm, yarn, or pnpm.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

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

### Full-Featured Setup

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/README.md

A comprehensive example including syntax highlighting, Mermaid diagrams, copy button, and file icons.

```typescript
import { MuiMarkdown, getOverrides } from 'mui-markdown';
import { Diagram } from 'mui-markdown/client';
import { Highlight, themes } from 'prism-react-renderer';

const overrides = getOverrides({
  Highlight, themes, prismTheme: themes.vsDark,
  enableMermaid: true, DiagramComponent: Diagram,
  copiable: true, showFileIcon: true
});

export const App = () => (
  <MuiMarkdown overrides={overrides}>{markdown}</MuiMarkdown>
);
```

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

### yarn start

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/examples/yarn-installation/README.md

Runs the app in the development mode. Opens http://localhost:3000 in the browser and reloads on changes. Displays lint errors in the console.

```bash
yarn start
```

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

### Installation with Yarn

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/README.md

Install the prism-react-renderer package using yarn.

```bash
yarn add prism-react-renderer
```

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

### Install Mermaid

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/configuration.md

Command to install the optional dependency for diagram rendering.

```bash
npm install mermaid
```

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

### Installation

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/README.md

Install mui-markdown using npm or yarn.

```bash
# with npm
npm i mui-markdown@latest

# with yarn
yarn add mui-markdown
```

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

### Install prism-react-renderer

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/README.md

Command to install prism-react-renderer using npm, required for syntax highlighting.

```bash
# with npm
npm i prism-react-renderer
```

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

### Install Prism React Renderer

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/configuration.md

Command to install the optional dependency for syntax highlighting.

```bash
npm install prism-react-renderer
```

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

### Installation

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/quick-reference.md

Install the mui-markdown package and its optional dependencies for syntax highlighting and diagrams.

```bash
npm install mui-markdown markdown-to-jsx @mui/material

# Optional: syntax highlighting
npm install prism-react-renderer

# Optional: diagrams
npm install mermaid
```

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

### yarn build

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/examples/yarn-installation/README.md

Builds the app for production to the 'build' folder, optimizing for performance. The build is minified with hashed filenames and is ready for deployment.

```bash
yarn build
```

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

### Tutorial Page with Diagrams

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/examples.md

Illustrates rendering a tutorial page that includes markdown, Mermaid diagrams, and code examples with syntax highlighting and copy functionality.

```typescript
import { MuiMarkdown } from 'mui-markdown';
import { Diagram } from 'mui-markdown/client';
import { Highlight, themes } from 'prism-react-renderer';
import { Container, Box } from '@mui/material';

const tutorialMarkdown = `
# React Hooks Tutorial

## Overview

\`\`\`mermaid
graph LR
  A[Component] --> B[Hook]
  B --> C[State]
  C --> D[Render]
\`\`\`

## useState Hook

\`\`\`typescript copiable highlighted="2-3"
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}
\`\`\`

## useEffect Hook

\`\`\`typescript name="hooks/useEffect.ts" copiable
import { useEffect, useState } from 'react';

export function useFetch(url: string) {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch(url)
      .then(r => r.json())
      .then(setData);
  }, [url]);
  
  return data;
}
\`\`\`
`;

export const Tutorial = () => {
  return (
    <Container maxWidth="lg">
      <MuiMarkdown
        enableMermaid
        DiagramComponent={Diagram}
        mermaidConfig={{ startOnLoad: true }}
        Highlight={Highlight}
        themes={themes}
        prismTheme={themes.github}
        copiable
        showFileIcon
      >
        {tutorialMarkdown}
      </MuiMarkdown>
    </Container>
  );
};

```

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

### Installation

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/README.md

Install the mui-markdown library and its peer dependencies.

```bash
npm install mui-markdown markdown-to-jsx @mui/material
```

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

### Complete Configuration Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/configuration.md

A comprehensive example demonstrating various configuration options for MuiMarkdown, including syntax highlighting, code block features, color customization, diagram integration, and file name display.

```typescript
import { MuiMarkdown } from 'mui-markdown';
import { Highlight, themes } from 'prism-react-renderer';
import { Diagram } from 'mui-markdown/client';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import CheckIcon from '@mui/icons-material/Check';

<MuiMarkdown
  // Syntax highlighting
  Highlight={Highlight}
  themes={themes}
  prismTheme={themes.github}
  hideLineNumbers={false}
  
  // Code block features
  copiable
  name="example.ts"
  
  // Copy button customization
  copyLabel="Copy"
  copiedLabel="Copied!"
  copyIcon={<ContentCopyIcon />}
  copiedIcon={<CheckIcon />}
  copyButtonSx={{ top: 12, right: 12 }}
  
  // File name customization
  showFileIcon
  fileNameSx={{ fontWeight: 'bold' }}
  useHighlightThemeBackground
  
  // Colors
  highlightColor="info.main"
  removedColor="error.main"
  insertedColor="success.main"
  
  // Diagrams
  enableMermaid
  DiagramComponent={Diagram}
  mermaidConfig={{ startOnLoad: true }}
  
  // Tables
  customTableScrollbar
>
  {markdown}
</MuiMarkdown>
```

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

### Basic Setup

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/mdx-components.md

Basic example of using getMdxComponents with Next.js's useMDXComponents hook.

```typescript
import type { MDXComponents } from 'mdx/types';
import { getMdxComponents } from 'mui-markdown';

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...getMdxComponents(),
    ...components,
  };
}
```

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

### Mermaid Configuration Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/configuration.md

An example of how to configure Mermaid for diagram rendering within MuiMarkdown.

```typescript
<MuiMarkdown
  enableMermaid
  DiagramComponent={Diagram}
  mermaidConfig={{
    startOnLoad: true,
    theme: 'default',
    securityLevel: 'loose',
    flowchart: {
      useMaxWidth: true,
      htmlLabels: true
    },
    sequence: {
      useMaxWidth: true,
      actorMargin: 50
    }
  }}
>
  {markdown}
</MuiMarkdown>
```

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

### Mermaid Installation

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/diagram.md

Command to install the Mermaid library as a dependency.

```bash
npm install mermaid
# or
yarn add mermaid
```

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

### Mermaid Kanban Board

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/examples/next15-typescript-mui7-mermaid/src/posts/1.md

A kanban board example using Mermaid syntax.

```mermaid
kanban
todo[Todo]
  id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
```

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

### Minimal Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/quick-reference.md

The simplest way to use MuiMarkdown with just the markdown content.

```typescript
<MuiMarkdown>{markdown}</MuiMarkdown>
```

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

### HighlightThemes Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/types.md

Example usage of HighlightThemes with predefined themes.

```typescript
import { themes } from 'prism-react-renderer';

const myThemes: HighlightThemes = {
  vsDark: themes.vsDark,
  github: themes.github,
  nightOwl: themes.nightOwl
};
```

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

### yarn test

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/examples/yarn-installation/README.md

Launches the test runner in the interactive watch mode. Refer to the running tests documentation for more information.

```bash
yarn test
```

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

### API Documentation Generator

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/examples.md

Illustrates rendering API documentation with code examples and diffs, utilizing mui-markdown's `getOverrides` for custom syntax highlighting and diff styling.

```typescript
import { MuiMarkdown, getOverrides } from 'mui-markdown';
import { Box, Typography } from '@mui/material';
import { Highlight, themes } from 'prism-react-renderer';

interface APIEndpoint {
  name: string;
  description: string;
  example: string;
  changes?: string;
}

export const APIDocumentation = (endpoints: APIEndpoint[]) => {
  const overrides = getOverrides({
    Highlight,
    themes,
    prismTheme: themes.vsDark,
    copiable: true,
    showFileIcon: true,
    highlightColor: 'info.main',
    removedColor: 'error.main',
    insertedColor: 'success.main'
  });

  return (
    <Box>
      {endpoints.map((endpoint) => (
        <Box key={endpoint.name} sx={{ mb: 6, pb: 4, borderBottom: '1px solid #ddd' }}>
          <Typography variant="h3">{endpoint.name}</Typography>
          <Typography variant="body1" sx={{ my: 2 }}>
            {endpoint.description}
          </Typography>
          
          <MuiMarkdown overrides={overrides}>
            {`\`\`\`typescript name="${endpoint.name}.ts"
${endpoint.example}
\`\`\``}
          </MuiMarkdown>

          {endpoint.changes && (
            <>
              <Typography variant="h5" sx={{ mt: 3, mb: 1 }}>Changes</Typography>
              <MuiMarkdown overrides={overrides}>
                {`\`\`\`typescript
${endpoint.changes}
\`\`\``}
              </MuiMarkdown>
            </>
          )}
        </Box>
      ))}
    </Box>
  );
};

```

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

### Dynamic Theme Switching Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/README.md

Demonstrates how to dynamically switch syntax highlighting themes.

```typescript
const [theme, setTheme] = useState('vsDark');
<MuiMarkdown
  Highlight={Highlight}
  themes={themes}
  prismTheme={themes[theme]}
>
  {markdown}
</MuiMarkdown>
```

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

### Syntax Highlighting

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/examples.md

Add code syntax highlighting with Prism.

```typescript
import { MuiMarkdown } from 'mui-markdown';
import { Highlight, themes } from 'prism-react-renderer';

export const DocumentationPage = ({ markdown }: { markdown: string }) => {
  return (
    <MuiMarkdown
      Highlight={Highlight}
      themes={themes}
      prismTheme={themes.github}
    >
      {markdown}
    </MuiMarkdown>
  );
};
```

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

### With Scroll-to-Link

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/examples.md

Provides an example of implementing scroll-to-link navigation within markdown content by customizing the link behavior.

```typescript
import { MuiMarkdown, defaultOverrides } from 'mui-markdown';
import { Link } from '@mui/material';

export const ScrollableMarkdown = ({ markdown }: { markdown: string }) => {
  return (
    <MuiMarkdown
      overrides={{
        ...defaultOverrides,
        a: {
          component: Link,
          props: {
            onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
              const href = e.currentTarget.getAttribute('href');
              if (href?.startsWith('#')) {
                e.preventDefault();
                document.getElementById(href.substring(1))?.scrollIntoView({
                  behavior: 'smooth'
                });
              }
            }
          }
        }
      }}
    >
      {markdown}
    </MuiMarkdown>
  );
};
```

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

### Component Override Pattern Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/display-components.md

Example demonstrating how to use the component override pattern with MuiMarkdown, including merging default overrides.

```typescript
import { MuiMarkdown, defaultOverrides } from 'mui-markdown';

<MuiMarkdown
  overrides={{
    ...defaultOverrides,
    h1: {
      component: CustomH1Component,
      props: {
        sx: { fontSize: '2rem', color: 'primary.main' }
      }
    }
  }}
>
  {markdown}
</MuiMarkdown>
```

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

### Creating Custom Display Components Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/display-components.md

Example of creating a custom display component (CustomHeading) and using it with MuiMarkdown overrides.

```typescript
import React from 'react';
import { Typography } from '@mui/material';

interface CustomHeadingProps {
  children?: React.ReactNode;
}

const CustomHeading = ({ children }: CustomHeadingProps) => (
  <Typography
    variant="h1"
    sx={{
      fontSize: '2.5rem',
      fontWeight: 700,
      color: 'primary.main',
      mb: 2
    }}
  >
    {children}
  </Typography>
);

// Use in MuiMarkdown
<MuiMarkdown
  overrides={{
    ...defaultOverrides,
    h1: CustomHeading
  }}
>
  {markdown}
</MuiMarkdown>
```

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

### OrderedList Usage Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/display-components.md

Example of using the OrderedList component for ordered lists.

```typescript
<MuiMarkdown>
  {`1. First item\n2. Second item\n3. Third item`}
</MuiMarkdown>
```

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

### Link Usage Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/display-components.md

Example of automatic application of the Link component to markdown links.

```typescript
<MuiMarkdown>
  {`[Click here](https://example.com)`}
</MuiMarkdown>
```

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

### Theme Switcher

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/examples.md

Demonstrates how to switch syntax highlighting themes at runtime using `prism-react-renderer` and Material-UI components.

```typescript
import { MuiMarkdown } from 'mui-markdown';
import { Highlight, themes } from 'prism-react-renderer';
import { Select, MenuItem, Box } from '@mui/material';
import { useState } from 'react';

type ThemeName = keyof typeof themes;

interface ThemeSwitcherProps {
  markdown: string;
}

export const ThemeSwitcher = ({ markdown }: ThemeSwitcherProps) => {
  const [selectedTheme, setSelectedTheme] = useState<ThemeName>('vsDark');

  return (
    <Box>
      <Select
        value={selectedTheme}
        onChange={(e) => setSelectedTheme(e.target.value as ThemeName)}
      >
        {Object.keys(themes).map((name) => (
          <MenuItem key={name} value={name}>
            {name}
          </MenuItem>
        ))}
      </Select>

      <MuiMarkdown
        Highlight={Highlight}
        themes={themes}
        prismTheme={themes[selectedTheme]}
        copiable
      >
        {markdown}
      </MuiMarkdown>
    </Box>
  );
};
```

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

### UnOrderedList Usage Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/display-components.md

Example of using the UnOrderedList component for unordered lists.

```typescript
<MuiMarkdown>
  {`- Item A\n- Item B\n- Item C`}
</MuiMarkdown>
```

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

### Complete Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/code-block-features.md

A comprehensive example demonstrating the integration of various code block features, including syntax highlighting, copy button, file name display, and custom styling, using `getOverrides`.

```typescript
import { MuiMarkdown, getOverrides } from 'mui-markdown';
import { Diagram } from 'mui-markdown/client';
import { Highlight, themes } from 'prism-react-renderer';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import CheckIcon from '@mui/icons-material/Check';

const markdown = `
\
\
```typescript name="src/hooks/useData.ts" highlighted="5-8" copiable
import { useState, useEffect } from 'react';

export const useData = (url: string) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchData();
  }, [url]);

  return { data, loading, error };
};
\
\
```
`;

const overrides = getOverrides({
  Highlight,
  themes,
  prismTheme: themes.vsDark,
  copiable: true,
  showFileIcon: true,
  copyIcon: <ContentCopyIcon />,
  copiedIcon: <CheckIcon />,
  highlightColor: 'info.main',
  fileNameSx: { fontWeight: 'bold' }
});

export const App = () => (
  <MuiMarkdown overrides={overrides}>
    {markdown}
  </MuiMarkdown>
);
```

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

### With Syntax Highlighting

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/README.md

Example demonstrating how to enable syntax highlighting using Prism.js.

```typescript
import { MuiMarkdown } from 'mui-markdown';
import { Highlight, themes } from 'prism-react-renderer';

export const App = () => (
  <MuiMarkdown
    Highlight={Highlight}
    themes={themes}
    prismTheme={themes.vsDark}
  >
    {markdown}
  </MuiMarkdown>
);
```

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

### InlineCode Usage Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/display-components.md

Example of automatic application of the InlineCode component to inline code.

```typescript
<MuiMarkdown>
  {`Use the 
`const
` keyword to declare variables.`}
</MuiMarkdown>
```

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

### Mermaid Flowchart

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/examples/next15-typescript-mui7-mermaid/src/posts/1.md

A simple flowchart demonstrating Mermaid syntax.

```mermaid
flowchart TD
    Start --> Stop
```

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

### Body1 Usage Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/display-components.md

Example of using the Body1 component for paragraph text.

```typescript
<MuiMarkdown>
  {`This is a paragraph that will use Body1 component.`}
</MuiMarkdown>
```

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

### Custom Override Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/quick-reference.md

Example of how to apply a custom override for a specific HTML element, like an h1 tag.

```typescript
<MuiMarkdown
  overrides={{
    ...defaultOverrides,
    h1: { component: CustomH1, props: { sx: {...} } }
  }}
>
  {markdown}
</MuiMarkdown>
```

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

### Minimal Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/README.md

A basic example of rendering a simple Markdown string with the MuiMarkdown component.

```typescript
import { MuiMarkdown } from 'mui-markdown';

export const App = () => (
  <MuiMarkdown>{`# Hello World\n\nThis is markdown.`}</MuiMarkdown>
);
```

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

### Next.js with MDX

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/examples.md

Integration with Next.js MDX components.

```typescript
// mdx-components.ts
import type { MDXComponents } from 'mdx/types';
import { getMdxComponents } from 'mui-markdown';
import { Highlight, themes } from 'prism-react-renderer';
import { Diagram } from 'mui-markdown/client';

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...getMdxComponents({
      Highlight,
      themes,
      prismTheme: themes.github,
      enableMermaid: true,
      DiagramComponent: Diagram,
      copiable: true
    }),
    ...components
  };
}
```

```typescript
// page.tsx
import { MDXRemote } from 'next-mdx-remote/rsc';

export default async function Page({ params }: any) {
  const { slug } = params;
  const markdown = await loadMarkdown(slug);

  return (
    <MDXRemote
      source={markdown}
      options={{
        mdxOptions: {
          development: process.env.NODE_ENV === 'development'
        }
      }}
    />
  );
}
```

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

### Usage Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/README.md

Example of how to use MuiMarkdown to render markdown content, specifically an h1 tag using MUI Typography.

```javascript
import React from 'react';
import { MuiMarkdown } from 'mui-markdown';
// You can also use
// import MuiMarkdown from 'mui-markdown';
// But the first approach is recommended.

const App = () => {
  return <MuiMarkdown>{`# Hello markdown!`}</MuiMarkdown>;
};

export default App;
```

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

### Multiple Custom Overrides

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/examples.md

Override several tags for consistent styling.

```typescript
import { MuiMarkdown, defaultOverrides } from 'mui-markdown';
import { Typography, Box, Paper } from '@mui/material';

export const ThemedMarkdown = ({ markdown }: { markdown: string }) => {
  return (
    <MuiMarkdown
      overrides={{
        ...defaultOverrides,
        h1: { component: Typography, props: { variant: 'h1', sx: { color: 'primary.main', mb: 3 } } },
        h2: { component: Typography, props: { variant: 'h2', sx: { color: 'primary.main', mt: 3, mb: 2 } } },
        blockquote: {
          component: Paper,
          props: {
            elevation: 2,
            sx: { p: 2, borderLeft: '4px solid', borderColor: 'primary.main' }
          }
        }
      }}
    >
      {markdown}
    </MuiMarkdown>
  );
};
```

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

### Global vs Per-Block: Global Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/code-block-features.md

Shows how to set default configurations for all code blocks using component props.

```typescript
<MuiMarkdown
  copiable={true}
  hideLineNumbers={false}
  name="example.ts"
>
  {markdown}
</MuiMarkdown>
```

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

### Blog Post with Metadata

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/examples.md

Shows how to render a blog post, including title, date, author, and markdown content, using mui-markdown with Prism.js for code highlighting.

```typescript
import { MuiMarkdown } from 'mui-markdown';
import { Box, Typography, Divider, Container } from '@mui/material';
import { Highlight, themes } from 'prism-react-renderer';

interface BlogPostProps {
  title: string;
  date: string;
  author: string;
  content: string;
}

export const BlogPost = ({ title, date, author, content }: BlogPostProps) => {
  return (
    <Container maxWidth="md">
      <Box sx={{ mb: 4 }}>
        <Typography variant="h2" sx={{ mb: 1 }}>{title}</Typography>
        <Typography variant="caption" color="textSecondary">
          By {author} • {new Date(date).toLocaleDateString()}
        </Typography>
      </Box>
      
      <Divider sx={{ mb: 4 }} />
      
      <MuiMarkdown
        Highlight={Highlight}
        themes={themes}
        prismTheme={themes.github}
        copiable
      >
        {content}
      </MuiMarkdown>
    </Container>
  );
};

```

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

### Example Custom Implementation of getScrollbarStyles

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/utilities.md

Provides a standalone example of using getScrollbarStyles for a custom scrollable div.

```typescript
import { Box } from '@mui/material';
import { getScrollbarStyles } from 'mui-markdown';

export const CustomScrollableDiv = () => {
  return (
    <Box
      sx={({ palette }) => ({
        height: '400px',
        overflow: 'auto',
        ...getScrollbarStyles(palette)
      })}
    >
      {/* Scrollable content */}
    </Box>
  );
};

```

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

### Custom Heading Styling Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/README.md

Provides an example of customizing heading styles using the `overrides` prop.

```typescript
<MuiMarkdown
  overrides={{
    ...defaultOverrides,
    h1: {
      component: Typography,
      props: { variant: 'h1', sx: { color: 'primary.main' } }
    }
  }}
>
  {markdown}
</MuiMarkdown>
```

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

### Custom Component Override

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/examples.md

Replace heading styling with custom component.

```typescript
import { MuiMarkdown, defaultOverrides } from 'mui-markdown';
import { Typography } from '@mui/material';

const CustomH1 = (props: any) => (
  <Typography
    variant="h1"
    sx={{
      fontSize: '3rem',
      fontWeight: 700,
      background: 'linear-gradient(45deg, #2196F3, #f093fb)',
      backgroundClip: 'text',
      WebkitBackgroundClip: 'text',
      WebkitTextFillColor: 'transparent',
      marginBottom: 3
    }}
    {...props}
  />
);

export const StyledArticle = ({ markdown }: { markdown: string }) => {
  return (
    <MuiMarkdown
      overrides={{
        ...defaultOverrides,
        h1: CustomH1
      }}
    >
      {markdown}
    </MuiMarkdown>
  );
};
```

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

### Performance Optimization

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/examples.md

Illustrates performance optimization by memoizing markdown content to prevent unnecessary re-renders using `useMemo`.

```typescript
import { MuiMarkdown } from 'mui-markdown';
import { useMemo } from 'react';
import { Highlight, themes } from 'prism-react-renderer';

interface OptimizedMarkdownProps {
  markdown: string;
}

export const OptimizedMarkdown = ({ markdown }: OptimizedMarkdownProps) => {
  // Memoize the parsed content
  const memoizedMarkdown = useMemo(() => markdown, [markdown]);

  return (
    <MuiMarkdown
      Highlight={Highlight}
      themes={themes}
      prismTheme={themes.vsDark}
      copiable
    >
      {memoizedMarkdown}
    </MuiMarkdown>
  );
};
```

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

### Overrides Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/types.md

Example of using Overrides to map HTML tags to React components.

```typescript
const overrides: Overrides = {
  h1: H1Component,
  p: ParagraphComponent,
  code: InlineCodeComponent,
  pre: CodeBlockComponent
};
```

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

### Configuration Hierarchy Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/README.md

Demonstrates how code block attributes can override component props.

```typescript
// Global setting
<MuiMarkdown copiable={false}>
  {/* Code block attribute overrides */}
  ```typescript copiable
  const x = 1;
  ```
</MuiMarkdown>
```

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

### Dark Mode Support

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/examples.md

Automatic dark mode support with MUI theme.

```typescript
import { MuiMarkdown } from 'mui-markdown';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { Highlight, themes } from 'prism-react-renderer';

const darkTheme = createTheme({
  palette: {
    mode: 'dark'
  }
});

export const App = ({ markdown }: { markdown: string }) => {
  return (
    <ThemeProvider theme={darkTheme}>
      <MuiMarkdown
        Highlight={Highlight}
        themes={themes}
        prismTheme={themes.vsDark}
      >
        {markdown}
      </MuiMarkdown>
    </ThemeProvider>
  );
};
```

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

### Markdown Editor Preview Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/README.md

Shows a common pattern for creating a live markdown editor preview.

```typescript
const [markdown, setMarkdown] = useState('');
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
  <TextField value={markdown} onChange={(e) => setMarkdown(e.target.value)} />
  <MuiMarkdown>{markdown}</MuiMarkdown>
</Box>
```

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

### Custom Theme Integration Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/README.md

Shows how to use MUI theme palette paths for highlight, removed, and inserted colors.

```typescript
<MuiMarkdown
  highlightColor="primary.main"
  removedColor="error.light"
  insertedColor="success.dark"
>
  {markdown}
</MuiMarkdown>
```

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

### Next.js Integration - MDX Content Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/mdx-components.md

Example of MDX content demonstrating various Markdown features supported by MUI Markdown, including headings, text formatting, code blocks, and Mermaid diagrams.

```mdx
# My Article

This is a paragraph with **bold** text.

```typescript highlighted="2"
const greeting = "Hello";
const name = "World";
console.log(`\${greeting}, \${name}!`);
```

## Diagram Example

```mermaid
graph TD
  A[Start] --> B[End]
```
```

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

### Integration with Form Libraries

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/examples.md

Demonstrates integrating MuiMarkdown with form libraries like `react-hook-form`, showing a markdown editor and preview.

```typescript
import { MuiMarkdown } from 'mui-markdown';
import { useForm, Controller } from 'react-hook-form';
import { Box, Button, TextField, Paper } from '@mui/material';
import { Highlight, themes } from 'prism-react-renderer';

export const MarkdownEditor = () => {
  const { control, watch } = useForm({
    defaultValues: { markdown: '# Hello\n\nStart typing...' }
  });

  const markdown = watch('markdown');

  return (
    <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
      <Controller
        name="markdown"
        control={control}
        render={({ field }) => (
          <TextField
            {...field}
            multiline
            rows={10}
            placeholder="Enter markdown..."
          />
        )}
      />

      <Paper>
        <MuiMarkdown
          Highlight={Highlight}
          themes={themes}
          prismTheme={themes.vsDark}
        >
          {markdown}
        </MuiMarkdown>
      </Paper>
    </Box>
  );
};
```

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

### Error Message Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/diagram.md

Log message displayed when `enableMermaid` is true but `DiagramComponent` is not provided.

```text
Make sure you've passed the Diagram component to the MuiMarkdown properly,
you can import it from 'mui-markdown/client'.
```

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

### Basic Usage with Yarn

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/package/README.md

Install the package with yarn and pass Highlight and themes to MuiMarkdown.

```bash
yarn add prism-react-renderer
```

```tsx
import React from 'react';
import { MuiMarkdown } from 'mui-markdown';
import { Highlight, themes } from 'prism-react-renderer';

const App = () => {
  return (
    <MuiMarkdown
      Highlight={Highlight}
      themes={themes}
      prismTheme={themes.github}
    >
      {`# Hello markdown!`}
    </MuiMarkdown>
  );
};

export default App;
```

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

### Blockquote Usage

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/display-components.md

Example of how to use the Blockquote component within MuiMarkdown.

```typescript
<MuiMarkdown>
  {`> This is a quote`}
</MuiMarkdown>
```

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

### parseLineRanges Examples

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/utilities.md

Illustrates various inputs and their corresponding outputs for the parseLineRanges function.

```typescript
parseLineRanges("1")           // [1]
parseLineRanges("1,3,5")       // [1, 3, 5]
parseLineRanges("1-3")         // [1, 2, 3]
parseLineRanges("1-3,5")       // [1, 2, 3, 5]
parseLineRanges("1,3-5,7,9-10") // [1, 3, 4, 5, 7, 9, 10]
parseLineRanges("1-3,2-4")     // [1, 2, 3, 4] (duplicates removed)
```

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

### Markdown Attributes Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/quick-reference.md

Demonstrates how to use attributes within markdown code blocks for features like file names, highlighting, and line number control.

```markdown
```language attribute1="value" attribute2 attribute3="value"
code
```

// Examples:
```typescript name="app.ts" copiable highlighted="2-4"
```

```typescript removed="3" inserted="4"
```

```typescript hideLineNumbers
```
```

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

### Usage of Heading Components with defaultOverrides

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/display-components.md

Example of applying heading components automatically via defaultOverrides.

```typescript
import { MuiMarkdown, defaultOverrides } from 'mui-markdown';

<MuiMarkdown overrides={defaultOverrides}>
  {`# Heading 1\n## Heading 2`}
</MuiMarkdown>
```

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

### Diagram Support with Mermaid

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/README.md

Example of enabling diagram support using Mermaid by setting `enableMermaid`, providing a `DiagramComponent`, and configuring Mermaid with `mermaidConfig`.

```tsx
import React from 'react';
import { MuiMarkdown, getOverrides } from 'mui-markdown';
import { Diagram } from 'mui-markdown/client'; // This component will handle mermaid init and content load
import { Highlight, themes } from 'prism-react-renderer';

const App = () => {
  return (
    <MuiMarkdown
      enableMermaid
      mermaidConfig={{ startOnLoad: true }}
      DiagramComponent={Diagram}
    >
      {/* Markdown content */}
    </MuiMarkdown>
  );
};

export default App;
```

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

### Custom Copy Button Component

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/configuration.md

An example of a custom copy button component that can be passed to MuiMarkdown.

```typescript
import { CopyComponentProps } from 'mui-markdown';
import { IconButton } from '@mui/material';

const CustomCopyButton = ({ handleCopy, code }: CopyComponentProps) => (
  <IconButton
    onClick={handleCopy}
    sx={{ position: 'absolute', top: 8, right: 8 }}
  >
    Copy {code.split('\n').length} lines
  </IconButton>
);

<MuiMarkdown CopyComponent={CustomCopyButton}>
  {markdown}
</MuiMarkdown>
```

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

### Combined Features Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/package/README.md

Demonstrates combining multiple markdown attributes for advanced code block features.

```tsx
```tsx name="src/utils/validator.ts" highlighted="4-6" removed="7" inserted="8" copiable hideLineNumbers
export function validateEmail(email: string): boolean {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!email) {
    return false;
  }
  const trimmedEmail = email.trimEnd();
  const trimmedEmail = email.trim();
  return regex.test(trimmedEmail);
}
```
```

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

### yarn eject

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/examples/yarn-installation/README.md

Removes the single build dependency from the project, giving full control over configuration files (webpack, Babel, ESLint, etc.). This is a one-way operation.

```bash
yarn eject
```

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

### Markdown with Embedded Components

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/examples.md

Demonstrates how to embed custom React components (like MUI's Alert) within markdown content using mui-markdown's options.

```typescript
import { MuiMarkdown } from 'mui-markdown';
import { Alert } from '@mui/material';

const markdown = `
This is normal markdown.

<Alert severity="warning">
  This is an embedded Alert component!
</Alert>

More markdown continues here.
`;

export const Component = () => {
  return (
    <MuiMarkdown
      options={{
        forceInline: false,
        forceBlock: false
      }}
    >
      {markdown}
    </MuiMarkdown>
  );
};

```

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

### Custom File Name Component

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/configuration.md

An example of a custom file name display component that can be passed to MuiMarkdown.

```typescript
import { TypographyProps } from '@mui/material';

const CustomFileNameDisplay = (props: TypographyProps) => (
  <Typography {...props} sx={{ ...props.sx, textTransform: 'uppercase' }} />
);

<MuiMarkdown
  name="src/App.tsx"
  FileNameComponent={CustomFileNameDisplay}
>
  {markdown}
</MuiMarkdown>
```

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

### With Syntax Highlighting

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/mdx-components.md

Example of using getMdxComponents with syntax highlighting enabled.

```typescript
import type { MDXComponents } from 'mdx/types';
import { getMdxComponents } from 'mui-markdown';
import { Highlight, themes } from 'prism-react-renderer';

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...getMdxComponents({
      Highlight,
      themes,
      prismTheme: themes.github,
      copiable: true
    }),
    ...components,
  };
}
```

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

### Valid Color Configurations

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/configuration.md

Examples of valid color configurations using Material-UI theme palette paths for highlight, removed, and inserted colors.

```typescript
// Valid color configurations
highlightColor="info.main"
highlightColor="primary.light"
removedColor="error.dark"
insertedColor="success.main"

// Also works with custom palette colors
highlightColor="custom.highlight"
```

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

### CopyButton Component Usage

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/utilities.md

Example of how to use the CopyButton component with custom labels.

```typescript
import { CopyButton } from 'mui-markdown';

<CopyButton
  code={codeContent}
  copyLabel="Copy"
  copiedLabel="✓"
/>
```

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

### Markdown Syntax Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/code-block-features.md

Demonstrates the basic syntax for adding attributes to code blocks in Markdown.

```markdown
```language attribute1="value" attribute2 attribute3="value"
code content
```
```

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

### Type-Safe Custom Overrides Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/README.md

Illustrates how to define custom component overrides using TypeScript.

```typescript
import type { Overrides } from 'mui-markdown';

const myOverrides: Overrides = {
  h1: { component: MyH1, props: { sx: {...} } }
};
```

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

### Combined Features Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/README.md

Demonstrates combining multiple features like file name, line highlighting, diffs, copy button, and hidden line numbers in a single code block.

```markdown
```tsx name="src/utils/validator.ts" highlighted="4-6" removed="7" inserted="8" copiable hideLineNumbers
export function validateEmail(email: string): boolean {
  const regex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;

  if (!email) {
    return false;
  }
  const trimmedEmail = email.trimEnd();
  const trimmedEmail = email.trim();
  return regex.test(trimmedEmail);
}
```
```

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

### Global vs Per-Block: Per-Block Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/code-block-features.md

Demonstrates how per-block attributes in the code fence override global settings.

```typescript
// Global: copiable={false}
<MuiMarkdown copiable={false}>
  {markdown}
</MuiMarkdown>
```

```typescript
// This block will have copy button despite global false
```typescript copiable
const x = 1;
```
```

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

### With Diagrams and Highlighting

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/mdx-components.md

Example of using getMdxComponents with diagrams and highlighting enabled.

```typescript
import type { MDXComponents } from 'mdx/types';
import { getMdxComponents } from 'mui-markdown';
import { Diagram } from 'mui-markdown/client';
import { Highlight, themes } from 'prism-react-renderer';

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...getMdxComponents({
      Highlight,
      themes,
      prismTheme: themes.vsDark,
      enableMermaid: true,
      DiagramComponent: Diagram,
      mermaidConfig: { startOnLoad: true },
      copiable: true,
      showFileIcon: true
    }),
    ...components,
  };
}
```

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

### With Custom Code Block Styling

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/getoverrides.md

Example demonstrating custom styling for code blocks, including highlight colors, copy button labels, and file icons.

```typescript
import { MuiMarkdown, getOverrides } from 'mui-markdown';
import { Highlight, themes } from 'prism-react-renderer';

export const App = () => {
  const overrides = getOverrides({
    Highlight,
    themes,
    prismTheme: themes.vsDark,
    copiable: true,
    copyLabel: 'Copy',
    copiedLabel: '✓ Copied',
    highlightColor: 'primary.main',
    removedColor: 'error.main',
    insertedColor: 'success.main',
    showFileIcon: true,
    useHighlightThemeBackground: true
  });

  return <MuiMarkdown overrides={overrides}>{markdown}</MuiMarkdown>;
};
```

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

### Development Server Commands

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/examples/next15-typescript-mui7/README.md

Commands to run the development server using different package managers.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

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

### extractCodeBlockProps Usage Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/utilities.md

Demonstrates how markdown attributes are parsed into an object by extractCodeBlockProps.

```typescript
// In markdown code block:
// ```tsx name="App.tsx" highlighted="2-4" copiable
// function App() { ... }
// ```

// Internally extracts:
// {
//   language: 'tsx',
//   code: 'function App() { ... }',
//   name: 'App.tsx',
//   highlighted: [2, 3, 4],
//   copiable: true
// }
```

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

### MuiMarkdown Component using useOptions

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/utilities.md

Example of how the MuiMarkdown component utilizes the useOptions hook to generate its options.

```typescript
export const MuiMarkdown = (props: MuiMarkdownProps) => {
  const { children = '' } = props;
  
  // Generates proper options object
  const options = useOptions(props);

  return <MarkdownRoot options={options}>{children}</MarkdownRoot>;
};
```

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

### Custom Diagram Component Implementation

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/diagram.md

An advanced example showing how to create a custom diagram component for more control over rendering and Mermaid initialization.

```typescript
import { Box, type BoxProps } from '@mui/material';
import { useEffect, useState } from 'react';
import type { DiagramProps } from 'mui-markdown';

const CustomDiagram = (props: DiagramProps) => {
  const { children } = props;
  const [mermaidInstance, setMermaidInstance] = useState<any>(null);

  useEffect(() => {
    if ('enableMermaid' in props && props.enableMermaid) {
      import('mermaid').then((module) => {
        module.default.initialize({
          startOnLoad: true,
          theme: 'dark',
          ...props.mermaidConfig
        });
        setMermaidInstance(module.default);
      });
    }
  }, [props]);

  useEffect(() => {
    if (mermaidInstance) {
      mermaidInstance.contentLoaded();
    }
  }, [mermaidInstance, children]);

  return (
    <Box
      className='mermaid'
      sx={{
        display: 'flex',
        justifyContent: 'center',
        padding: 2
      }}
    >
      {children}
    </Box>
  );
};

```

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

### Basic Usage (Spread into Custom Overrides)

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/defaultoverrides.md

This example shows how to spread defaultOverrides into custom overrides, allowing for specific component modifications like changing the color of h1 elements.

```typescript
import { MuiMarkdown, defaultOverrides } from 'mui-markdown';

export const App = () => {
  return (
    <MuiMarkdown
      overrides={{
        ...defaultOverrides,
        h1: {
          component: 'h1',
          props: {
            style: { color: 'red' }
          }
        }
      }}
    >
      {`# Red Heading\n\nNormal paragraph.`}
    </MuiMarkdown>
  );
};
```

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

### Enabling Mermaid Diagrams

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/getoverrides.md

Example demonstrating how to enable Mermaid diagrams by passing `enableMermaid: true` and providing a `DiagramComponent` to `getOverrides`.

```typescript
import { MuiMarkdown, getOverrides } from 'mui-markdown';
import { Diagram } from 'mui-markdown/client';
import { Highlight, themes } from 'prism-react-renderer';

export const App = () => {
  const overrides = getOverrides({
    Highlight,
    themes,
    prismTheme: themes.github,
    enableMermaid: true,
    DiagramComponent: Diagram,
    mermaidConfig: {
      startOnLoad: true,
      theme: 'default'
    }
  });

  return <MuiMarkdown overrides={overrides}>{markdown}</MuiMarkdown>;
};
```

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

### Divider Usage Example

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/display-components.md

Example of using the Divider component for horizontal rules.

```typescript
<MuiMarkdown>
  {`Text above\n\n---\n\nText below`}
</MuiMarkdown>
```

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

### Customization: Custom Copy Component

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/README.md

Provides an example of a completely custom copy button component, demonstrating how to use `CopyComponentProps` to access `handleCopy` and `code` for custom logic and rendering.

```tsx
import { CopyComponentProps } from 'mui-markdown';
import { IconButton } from '@mui/material';

const CustomCopyButton = ({ handleCopy, code }: CopyComponentProps) => {
  return (
    <IconButton
      onClick={handleCopy}
      sx={{ position: 'absolute', top: 8, right: 8 }}
    >
      Copy {code.split('\n').length} lines
    </IconButton>
  );
};

const overrides = getOverrides({
  Highlight,
  themes,
  CopyComponent: CustomCopyButton,
});
```

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

### Multiple Diagrams in Document

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/diagram.md

Example demonstrating how to render multiple Mermaid diagrams within a single document using the Diagram component.

```typescript
import { MuiMarkdown } from 'mui-markdown';
import { Diagram } from 'mui-markdown/client';
import { Highlight, themes } from 'prism-react-renderer';

export const App = () => {
  const markdown = "
# System Architecture

```mermaid
graph LR
  Client[Client] --> Server[Server] --> DB[Database]
```

# Data Flow

```mermaid
sequenceDiagram
  Client->>Server: Request
  Server->>DB: Query
  DB-->>Server: Result
  Server-->>Client: Response
```
  ";

  return (
    <MuiMarkdown
      enableMermaid
      DiagramComponent={Diagram}
      mermaidConfig={{ startOnLoad: true }}
      Highlight={Highlight}
      themes={themes}
      prismTheme={themes.vsDark}
    >
      {markdown}
    </MuiMarkdown>
  );
};

```

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

### With TypeScript Type Safety

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/api-reference/defaultoverrides.md

This example shows how to use TypeScript to ensure type safety when defining custom overrides that extend the defaultOverrides.

```typescript
import { MuiMarkdown, defaultOverrides } from 'mui-markdown';
import type { Overrides } from 'mui-markdown';

export const App = () => {
  const customOverrides: Overrides = {
    ...defaultOverrides,
    h1: {
      component: 'h1',
      props: { style: { color: 'blue' } }
    }
  };

  return (
    <MuiMarkdown overrides={customOverrides}>
      {markdown}
    </MuiMarkdown>
  );
};
```

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

### Optional Dependencies

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/quick-reference.md

Lists optional dependencies that provide additional features like syntax highlighting and diagram rendering.

```text
- prism-react-renderer >= 2.0.3 (for syntax highlighting)
- mermaid >= 11.6.0 (for diagrams)
- @types/mdx >= 2.0.13 (for MDX support)
```

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

### Syntax Highlighting

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/configuration.md

Configures syntax highlighting with Prism.

```typescript
import { MuiMarkdown } from 'mui-markdown';
import { Highlight, themes } from 'prism-react-renderer';

<MuiMarkdown
  Highlight={Highlight}
  themes={themes}
  prismTheme={themes.github}
>
  {markdown}
</MuiMarkdown>
```

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

### Common Error: Cannot set both 'options' and 'overrides'

Source: https://github.com/hpouyanmehr/mui-markdown/blob/main/_autodocs/quick-reference.md

Explains the cause and fix for the error message 'Cannot set both 'options' and 'overrides''.

```text
"Cannot set both 'options' and 'overrides'"
**Cause**: Providing both `options` and `overrides` props  
**Fix**: Use either `options` OR `overrides`, not both
```