lami Comments - Answer Overflow

lami

Posts Comments

TTCTheo's Typesafe Cult

•Created by lami on 10/28/2023 in #questions

next-remote-mdx not rendering markdown table syntax

thanks man

18 replies

TTCTheo's Typesafe Cult

•Created by lami on 10/28/2023 in #questions

next-remote-mdx not rendering markdown table syntax

can you pls tell be how to solve this question as solved

18 replies

TTCTheo's Typesafe Cult

•Created by lami on 10/28/2023 in #questions

next-remote-mdx not rendering markdown table syntax

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}
    />
  );
}

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}
    />
  );
}