Working with MDX in Nextjs with rehype and remark
Unanswered
Japanese pilchard posted this in #help-forum
Japanese pilchardOP
I am rendering markdown in these sections into html, but, I need to use rehype-autolink-headings from rehype with this generated html from the mdx to add auto links to the headers, and THEN render THIS onto the screen. Any idea how I can do this, very stuck
return (
<div className="mt-28 flex justify-center px-4">
<div className="prose relative dark:prose-invert">
{typeof heading === "string" ? <MDXRemote source={heading} /> : null}
<CopyButton />
{typeof first === "string" ? <MDXRemote source={first} /> : null}
{typeof second === "string" ? <MDXRemote source={second} /> : null}
{typeof third === "string" ? <MDXRemote source={third} /> : null}
{typeof fourth === "string" ? <MDXRemote source={fourth} /> : null}
{typeof fifth === "string" ? <MDXRemote source={fifth} /> : null}
</div>
</div>
);
return (
<div className="mt-28 flex justify-center px-4">
<div className="prose relative dark:prose-invert">
{typeof heading === "string" ? <MDXRemote source={heading} /> : null}
<CopyButton />
{typeof first === "string" ? <MDXRemote source={first} /> : null}
{typeof second === "string" ? <MDXRemote source={second} /> : null}
{typeof third === "string" ? <MDXRemote source={third} /> : null}
{typeof fourth === "string" ? <MDXRemote source={fourth} /> : null}
{typeof fifth === "string" ? <MDXRemote source={fifth} /> : null}
</div>
</div>
);