hashicorp / next-mdx-remote

Load MDX content from anywhere
Mozilla Public License 2.0
2.72k stars 141 forks source link

Markdown table not rendering as HTML table #370

Closed SakarDev closed 1 year ago

SakarDev commented 1 year ago

Markdown table content fetched from a remote source and rendered using next-mdx-remote is not displayed as an HTML table. Instead, it is converted into a paragraph tag.

Reproduction Steps:

Expected Behavior:

The table in the Markdown content should be properly parsed and rendered as an HTML table with the correct header and data cells.

Example Table:

Header 1 Header 2 Header 3
Data 1 Data 2 Data 3

Actual Behavior:

Instead of rendering the table as an HTML table, the Markdown table is converted into a paragraph tag. The resulting HTML looks like this:

Example Table: | Header 1 | Header 2 | Header 3 | | --- | --- | --- | | Data 1 | Data 2 | Data 3 |

Additional Information:

I have other Markdown components, such as headings (h1, h2, etc.), lists (ul, ol), and paragraphs (p), are rendered correctly by next-mdx-remote. The problem is only not treating table as table.

Environment: next-mdx-remote version: [4.4.1] Next.js version: [13.2.3] Node.js version: [16.17.0]

Please let me know if any further information is needed to investigate and resolve this issue. Thank you for your assistance!

BRKalow commented 1 year ago

Tables are a feature of GitHub Flavored Markdown, which can be added by using a remark plugin. Documented here: https://mdxjs.com/guides/gfm/

SakarDev commented 1 year ago

@BRKalow Many thanks, it works perfectly fine!

elifciftci commented 1 year ago

@SakarDev Hello. I have same issue with you and I could not apply the right solution. How did you solve your problem?

SakarDev commented 1 year ago

Just install remarkGfm and pass it to the mdxOptions like the following: const mdxSource = await serialize(content, { mdxOptions: { remarkPlugins: [remarkGfm], }, });

elifciftci commented 1 year ago

@SakarDev Thanks a lot

elifciftci commented 1 year ago

@SakarDev Hello again. I create an issue about clickable area after table. Can you check my issue if you have time?

https://github.com/hashicorp/next-mdx-remote/issues/412

SakarDev commented 1 year ago

@SakarDev Hello again. I create an issue about clickable area after table. Can you check my issue if you have time?

412

Sure