Nuxt Content v2 markdown headers rendered as URLs

Question

I'm writing Markdown content in Nuxt 3 & Nuxt Content 2.1 and I am facing a problem as I cannot write h2-h6 headers without it rendering them as links.

h1 works fine with one octothorpe symbol but as soon as I add 1 or more of them to render smaller headers, the application automatically transforms them to URLs.

Content is rendered with the default [...slug].vue and <ContentDoc /> configuration as seen in the documentation.

What's written in Markdown:

# header 1

## header 2

... and what's actually being rendered in HTML:

<h1 id="header-1">
  <!--[-->
  header 1
  <!--]-->
</h1>

<h2 id="header-2">
  <a href="#header-2">
    <!--[-->
    header 2
    <!--]-->
  </a>
</h2>

Is there any way to solve this?

EDIT:

Nuxt is also transforming simple HTML <h2> tags to links, but now with an undefined href:

<h2>header 2</h2>

to

<h2>
  <a href="#undefined">
    header 2
  </a>
</h2>

Answer 1

You can also change this behaviour in your nuxt.config file

content: {
  markdown: {
    anchorLinks: false,
  }
},

https://content.nuxtjs.org/api/configuration/#anchorlinks

Answer 2

Checkout the Nuxt Content doc here:

In Nuxt Content, Prose represents the HTML tags output from the Markdown syntax, for example title levels, links... A Vue component corresponds to each tag, allowing you to override them if needed.

By default, h2 becomes <a> tag in <h2> tag, it is defined in this file. These files are listed in components/prose section.

You may overwrite it by:

1. create components/content directory
2. create ProseH2.vue in it
3. copy the code from the origin file, in the template section, remove the <a> tag and the v-else, or whatever modification you want to do with it:

<template>
  <h2 :id="id">
    <slot />
  </h2>
</template>

Restart server, it should changes.