Theo's Typesafe Cult•8mo ago

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 = {...

Jump to solution

12 Replies

lami•8mo ago

Here is the solution may it helps someone

Josh•8mo ago

please paste your code here as a code snippet and not screenshots

lami•8mo ago

Im new to this

Josh•8mo ago

alrighty still do this also we need more context specifically what does it look like now?

lami•8mo ago

How can i add snippet

Josh•8mo ago

https://www.alphr.com/discord-code-blocks/

Alphr

How to Use Code Blocks in Discord

Most Discord users type and send their messages without much knowledge of coding. After all, you don't need fancy coding to talk to someone else. There are some advantages, though, to learning basic codes to make your messages stand

Josh•8mo ago

it should look like this. make sure you use the correct file extension so text highlighting works correctly

it should look like this. make sure you use the correct file extension so text highlighting works correctly

lami•8mo ago

Ok thanks i understand ~~~

Solution

lami•8mo ago

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

lami•8mo ago

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

Josh•8mo ago

lami•8mo ago

thanks man

Gaming

Programming

next-remote-mdx not rendering markdown table syntax