react-markdown-sample.tsx

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

export const Markdown = ({ children }: { children: string }) => {
  return (
    <>
      <style>
        <>
          {`
            .markdown li p {
              padding: 0;
              display: inline;
            }
          `}
        </>
      </style>
      <ReactMarkdown
        className="markdown select-none"
        remarkPlugins={[remarkGfm]}
        skipHtml={false}
        components={{
          // We can do all styling for markdown content here
          p: ({ children }) => <p className="text-lg py-1 my-0 text-white">{children}</p>,
          ol: ({ children }) => <ol className="list-decimal pl-4 list-outside">{children}</ol>,
          ul: ({ children }) => <ul className="list-disc pl-4 list-inside">{children}</ul>,
          li: ({ children }) => <li className="text-lg text-white">{children}</li>,
          a: ({ children, href }) => (
            <a
              href={href}
              className="text-[#f6eca3] cursor-pointer underline"
              target="_blank"
              rel="noopener noreferrer"
            >
              {children}
            </a>
          ),
          img: ({ src, alt }) => (
            <img
              src={src?.replace('../../../public/', import.meta.env.BASE_URL || './')}
              alt={alt}
              className="w-full border border-brand-pink-500/75 shadow-md rounded my-1"
            />
          ),
          h1: ({ children }) => (
            <h1 className="text-2xl font-semibold leading-none tracking-tight text-white pb-4">{children}</h1>
          ),
          h2: ({ children }) => (
            <h2 className="text-xl font-semibold leading-none tracking-tight text-white py-4 underline">{children}</h2>
          ),
        }}
      >
        {children}
      </ReactMarkdown>
    </>
  );
};