I am trying to implement markdown on my blog built in Next.js 13 using react-markdown and rehypeRaw to allow HTML in it. I am using "use client" in this file. However, my text only shows up when I use markdown (#, ##, etc.) and heading levels are ignored, it's always the same small size. Just to clarify, styling with stars like strong works. When I try to use rehypeRaw like this:
<ReactMarkdown
// @ts-expect-error
rehypePlugins={[rehypeRaw]}
>
<h1> yessss</h1>
</ReactMarkdown>
Nothing shows up in the html tree, I receive this error on the line:
Type 'Element' is not assignable to type 'string'.
I just want to be able to use HTML and tailwindCSS with that inside of my markdown content. Or since this is just content that only I am allowed to post should I use dangerouslySetInnerHTML? I know that at least that solution works with Tailwind as I tested it. Would that be a vulnerability even though I am the only person with auth access to this website?
// @ts expect error
is what many GitHub issues describe as a workaround for rehypePlugins throwing this error:
Type '(options?: Options | null | undefined) => (tree: Root, file: VFile) => Root' is not assignable to type 'Pluggable<any[]>'.
Type '(options?: Options | null | undefined) => (tree: Root, file: VFile) => Root' is not assignable to type 'Plugin<any[], any, any>'.
Type '(tree: Root, file: VFile) => Root' is not assignable to type 'void | Transformer<any, any>'.
Type '(tree: Root, file: VFile) => Root' is not assignable to type 'Transformer<any, any>'.
I also followed the accepted answer here to be able to properly render regular markdown: react-markdown don“t render Markdown