Can the <p> element get removed form anchor link?

[kay-adamof]

In this document, the anchor link will be converted to this JSX equivalent;

<>
  <p><a href="https://mdxjs.com" title="title">MDX</a></p>
</>

However, I don't want to use <p> element for personal reason.

Is there any way to get rid of it?

[wooorm]

XY problem. Provide more info.

You seem to ask about how markdown works. If you write `x`, then you’ll get code too, but you’ll also get a p. Same for links, images, emphasis, etc. As they can only exist in headings/paragraphs. Read our website for more info on how MD(X) works.

[kay-adamof]

Thank you for replying me. I've found the solution to my issue after reading website carefully and rethink about what I want to do.

Here's just for my remember.

I'm creating a blog app using Nextjs with next-mdx-remote to compile markdown file that has several external links.

To make the displaying of links prettier, I was trying to customize anchor element via components. What I actually did was to return the component bookmark to ;

// some logics are omitted

const components = {
  a: (props)=> bookmark,
}

export function CustomMDX(props: any) {
  return (
    <MDXRemote
      {...props}
      components={{ ...components, ...(props.components || {}) }}
    />
  )

const bookmark = (
  <div className='card card-side bg-base-100 shadow-xl'>
    <figure>
      <Image
        src={meta('og:image')}
        width={500}
        height={500}
        alt=''
      />
    </figure>
    <div className='card-body'>
      <h2 className='card-title'>
        <a>{meta('og:title')}</a>
      </h2>
      <p>{meta('og:description')}</p>
    </div>
  </div>
)

However Nextjs shows an error Hydration failed and warns Warning: Expected server HTML to contain a matching <div> in <p>.. Actually the generated HTML file has div element inside of p(aragraph) element.

Those messages let me think to get rid of the p element from compiled file so that I ask how to do it in this discussion.

My temporary solution is to replace all the p element with div element by using below;

const components = {
  a: (props)=> bookmark,
  p: 'div'
}

I'm not sure this solution is fundamental, I keep going on.

[wooorm]

Not sure about this, your code is buggy!

Do not stuff JSX into a global variable bookmark and then return it in the component.a component. That’s not how React works. Things will break!

You are getting errors because you are creating broken HTML. It is unrelated to MDX. You need to fix your code. This “fix” does not solve your problem.

Post your actual code, this extract is too short to be able to help you.