vitepress

vitepress copied to clipboard

Hi,

I almost finished my lib docs and now I am refactoring demos and I want to put demo section links in my custom card.

How can I convert my h2 tag like markdown-it tag so it can get anchor based on its name.

Just add an id attribute on your h2. Then the URL to that element will be foo.com/that-page#id.

I know that but I had to generate id my self. I want it to auto generate like regular md content.

Moreover, I also lost on this page links.

I know that but I had to generate id my self. I want it to auto generate like regular md content.

Probably will have to add some custom client-side script to watch DOM, get all h2 elements and add id if its not there.

Moreover, I also lost on this page links.

Yeah it won't show. There is an open feature request for this: #785. We currently use the headers returned by our markdown plugin to generate the outline component, so it doesn't consider normal html tags, vue elements and interpolations, etc.

Great! It looks promising. I guess this is now a feature request rather than a question.

Shall we keep it open?

Moreover, this issue issues needs to resolve two feature request hence it might take longer. I probabaly release the lib next week. May I know should I want to move on without this feauture?

I know OSS devs have lot on their plate so just friendly question 😊

Thanks.

You probably should publish your docs without that. It's currently on low priority and frankly I'm unsure how to handle that unless generating outline completely on client side.

Does the rollout of build-time data loading change this?

I've changed my dynamic headings to fetch all plugins at build time instead, but I still get all links using the vue function instead of processing the output then using that output in the outline section.

Example:

Outline is now generated purely on client-side. So if one specifies id on heading elements, it will show up on the outline.

Probably will have to add some custom client-side script to watch DOM, get all h2 elements and add id if its not there.

This I'm still unsure how to handle and if we should even handle it. As a workaround, you can use some global component like this:

<script setup lang="ts">
import slugify from '@sindresorhus/slugify'

defineProps<{
  as: 'h2' | 'h3' | 'h4'
  text: string
}>()
</script>

<template>
  <component :is="as || 'h2'" :id="slugify(text)">{{ text }}</component>
</template>