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>
You can also change this behaviour in your nuxt.config file
content: {
markdown: {
anchorLinks: false,
}
},