How to remove first pre tag from nested pre tag.

[umschaudhary]

React markdown added two pre tag pre > pre which added a white background color. I want to remove it.

[wooorm]

The don’t add it. react-markdown doesn’t add it. The way you configure it does.
Also: see https://github.com/remarkjs/.github/blob/main/support.md for how to ask proper questions

[Anthony-Gaudino]

Please see #684 (reply in thread) and #684 (reply in thread) for solutions.

[soykje]

Hi 👋 I'm facing quite the same issue... @wooorm you were talking about configuration could you please be more explicit? There is actually a pre tag wrapper apparently generated by react-markdown (as detailed here if I'm not wrong?). I'm looking for a way to remove it, as it breaks my layout... 😕

I tried a simple

// within components prop
code: ({ children, className, inline }) => inline ? <code>{children}</code> : <p>{children}</p>

which gives me at the end something like

<pre>
  <p>Lorem ipsum dolor sit amet...</p>
</pre>

Thx in advance for your help! 🙏

[wooorm]

That’s not what this thread is about. This is about nested pre tags. A.k.a., two.

For what you’re doing: I have no clue why you’d want to turn off (block) code. How do you mean “breaks my layout”? You can style things with CSS.
While I don’t understand what you want to do and why, well, similar to a code component that you have, there’s also a pre component that you could change. There are also several options on ignoring elements (such as disallowedElements).

[soykje]

Hello, and thx for your quick answer 👍 Sorry, I understood the thread's topic as being about the pre wrapper (the "first pre tag")... 😕
To explain myself better (I hope!), I was actually using prism-react-renderer to display my code blocks, with an old version of react-markdown (v5). After upgrading I noticed a pre wrapper for code component (as explained above), which brings two problems for me:

1. I apparently cannot style it using my current stack (CSS-In-JS, Styled Components)
2. I get a weird DOM, with two nested pre, as my custom block code component already has one

So this is not about turning off the block code, but juste about how I can use a custom component in this particular case (with generated and apparently non optional wrapper). I'll check the disallowedElements prop to see if that helps, anyway. Thank you!

[wooorm]

https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight

[WeiGrand]

I also encountered this issue and I found out a simple workaround for this by adding a pre handler like this:

 <ReactMarkdown
  components={{
    // return the children instead of wrapping the children with `<pre></pre>`
    pre({children}) {
      return children
    },
    code({node, inline, className, children, ...props}) {
      const match = /language-(\w+)/.exec(className || '')
      return !inline && match ? (
        <div className='not-prose'>
          <CodeBlock language={match[1]} {...props}>{children}</CodeBlock>
        </div>
      ) : (
        <code {...props} className={className}>
          {children}
        </code>
      )
    }
  }}
></ReactMarkdown>

[aditbhartia]

@WeiGrand's solution worked exactly for what I needed. Thank you! Maybe this can be documented somewhere or clarified in documentation? Without the pre handler, my default styling breaks within Markdown components.