import MuiMarkdown from '@alfredo.salzillo/mui-markdown';

const markdown = `
# Hello World
This is a **bold** text and a [link](https://mui.com).

\`\`\`ts
const hello = "world";
console.log(hello);
\`\`\`
`;

function App() {
  return (
    <MuiMarkdown>
      {markdown}
    </MuiMarkdown>
  );
}

import MuiMarkdown from '@alfredo.salzillo/mui-markdown';
import { githubLight } from '@alfredo.salzillo/mui-markdown/prism-themes/github-light';

function App() {
  return (
    <MuiMarkdown prismTheme={githubLight}>
      {markdown}
    </MuiMarkdown>
  );
}

import MuiMarkdown from '@alfredo.salzillo/mui-markdown';
import { Typography } from '@mui/material';

function App() {
  return (
    <MuiMarkdown
      components={{
        h1: ({ children }) => <Typography variant="h4" color="primary">{children}</Typography>,
      }}
    >
      # This will be rendered as an H4 in primary color
    </MuiMarkdown>
  );
}

import MuiMarkdown from '@alfredo.salzillo/mui-markdown';
import remarkEmoji from 'remark-emoji';

function App() {
  return (
    <MuiMarkdown remarkPlugins={[remarkEmoji]}>
      Hello :dog:!
    </MuiMarkdown>
  );
}

import MuiMarkdown from '@alfredo.salzillo/mui-markdown';

function App() {
  return (
    <MuiMarkdown
      reactMarkdownOptions={{
        skipHtml: true,
        unwrapDisallowed: true,
      }}
    >
      # No HTML here <span>test</span>
    </MuiMarkdown>
  );
}