CODEWITHSUNDEEP
htmlnuxt.jsmarkdownnuxt3.jsnuxt-content
dahegyi
dahegyi

Reputation: 81

Nuxt Content v2 markdown headers rendered as URLs

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>

Upvotes: 4

Views: 1302

Answers (2)

Sam
Sam

Reputation: 56

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

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

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

Upvotes: 4

Nick_Ning
Nick_Ning

Reputation: 56

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.

Upvotes: 4

Related Questions