Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago
lami

next-remote-mdx not rendering markdown table syntax

i was using react-markdown with remark-gfm and rehype-Raw were it support table syntax
| Name | Age |
| ---- | --- |
| john | 24 |

now i choose to switch to next-remote-mdx since im using mdx i have added the both plugins remark-gfm and rehype-raw but the table syntax is not recognised and its rendered as plain text

Here is my next config

const withMDX = createMDX({
// Add markdown plugins here, as desired
options: {
remarkPlugins: [remarkGfm],
rehypePlugins: [rehypeRaw],
},
extension: /.(md|mdx)$/,
providerImportSource: '@mdx-js/react',
});
export default withMDX(nextConfig);
Solution
import { MDXRemote } from 'next-mdx-remote/rsc';
import remarkGfm from 'remark-gfm';

const options = {
  mdxOptions: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [],
  },
};

const components = {
h1: (props: any) => {
    return (
      <h1
        style={{ fontSize: '2em', margin: '0.67em 0', fontWeight: 'bold' }}
        className=' text-[#1c2534] dark:text-[white]'
      >
        {props.children}
      </h1>
    );
  },
  h2: (props: any) => {
    const id = props.children.replace(/ /g, '-');
    return (
      <h2
        style={{ fontSize: '1.5em' }}
        id={id}
        className=' mb-[15px] mt-[50px] scroll-m-[100px] font-semibold text-[#1c2534] dark:text-[white] sm:scroll-m-[200px]'
      >
        {props.children}
      </h2>
    );
  },
}

export function CustomMDX(props: any) {
  return (
    <MDXRemote
      {...props}
      components={{ ...components, ...(props.components || {}) }}
      options={options}
    />
  );
}
Jump to solution
Was this page helpful?