Replies: 2 comments 1 reply
-
This is my current solution
|
Beta Was this translation helpful? Give feedback.
-
You can use the MDC syntax for the headings with external link and provide a custom prop. My code example for the component would be this: <!-- components/content/ProseH2.vue -->
<template>
<h2 :id="id">
<a v-if="link" :href="link">
<slot />
</a>
<a v-else-if="id && generate" :href="`#${id}`">
<slot />
</a>
<slot v-else />
</h2>
</template>
<script setup lang="ts">
import { useRuntimeConfig } from '#imports';
defineProps<{ id?: string; link?: string }>();
const heading = 2;
const { anchorLinks } = useRuntimeConfig().public.content;
const generate = anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading);
</script> It adds a prop Here is an example with MDC syntax that shows how you could use it (anchor IDs are still added to the h2). ::h2{link="https://your.url"}
hello
:: This is the MDC syntax without the link prop, which should act exactly like before (by linking to the ID) ::h2
hello
:: You can check it out on Stackblitz: |
Beta Was this translation helpful? Give feedback.
-
Hi!
I have issue, that sometimes I need this headings:
And this would generate broken HTML code: h2 > a > a
Anybody has a solution for a custom ProseH* component, that will consider the case of including a link and the common case.
Beta Was this translation helpful? Give feedback.
All reactions