1

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

1voy
  • 11
  • 3

0 Answers0