Can the default header level be changed?

[tomleo]

I have a REST API that stores blog posts like this:

{
    id: 'UUID',
    title: 'String',
    body: 'String',
}

In nuxt I'm taking the retrieved data and transforming it:

const showPreview = async () => {
    previewData.value = await transformContent('content:dummy.md', form.value.body);
    preview.value = true;
};

I'm then displaying it via:

<div v-if="preview">
    <ContentRenderer :value="previewData">
        <h1>{{ form.title }}</h1>
        <ContentRendererMarkdown :value="previewData" />
    </ContentRenderer>
</div>

My Question: Since I'm storing the title seperate from the body content, is there a way to configure ContentRendererMarkdown such that # text results in <h2>text</h3> ect.? That way my title from the server will be the <h1>, and the highest level from the markdown content will be rendered as an <h2>. Is this possible? Thanks!

[nobkd]

Sure. you can create the component components/content/ProseH1.vue (used by the parser to convert # to <h1>) to override the internal ProseH1 component, so it displays a <h2> instead of a <h1>.

e.g. just for title generation:

<!-- /components/content/ProseH1.vue -->

<template>
  <h2><slot /></h2>
</template>

or with title and link generation:

<!-- /components/content/ProseH1.vue -->

<template>
  <h2 :id="id">
    <a :href="`#${id}`">
      <slot />
    </a>
  </h2>
</template>

<script setup lang="ts">
defineProps<{ id: string }>()
</script>

If you want to, you can repeat this process for the ProseH2 to ProseH5 in the same way (remember that you have h6 two times then)

Refer to the prose docs and the prose components list

---

Related:

• @nuxt/content V2 renders <a> tag inside heading tags (h1, h2 ...) #1248 (comment)
• h2 and below tags getting converted into <a> links #1506 (comment)

Other option without link generation: #1495 (comment)

[tomleo]

This is super helpful! Thanks!