How to access to internal markdown-it object?

[HeekangPark]

Is there any method to access to the Vitepress's internal markdown-it object?

I create a custom Vue component, and I hope I can render markdown(especially, a mathjax statement) text passed to it with props.

Is there any method to do it?

[brc-dd]

There is createMarkdownRenderer API but the markdown-it instance is only available at server-side. You won't be able to use it from client code if your props are dynamic.

[HeekangPark]

The props are static. Everything is determined at build time.

It contains some mathjax syntax($ ... $) as well as markdown syntax(` ... `, ** ... **), though.

Can you please give me an example code how to use createMarkdownRenderer API?

[brc-dd]

#2921 (comment)

[HeekangPark]

It seems like the solution you give does not fit with my case.

What I want to do is to create a custom Vue component to show images with captions. To do so, I made a custom Vue component like below.

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRoute } from 'vitepress';

const props = defineProps<{
  src: string
  title?: string
  description?: string
  alt?: string
}>();

const route = useRoute();

const src = computed(() => {
  if (props.src.startsWith('http')) { // External URL
    return props.src;
  } else if (props.src.startsWith('/')) { // Absolute path
    return props.src;
  } else { // Relative path
    return `/imgs/${route.path.split('/').slice(1, -1).join('/')}/${props.src}`;
  }
});
const alt = computed(() => props.alt || props.title || props.src);

const title = computed(() => props.title ? props.title : '');
const description = computed(() => props.description ? props.description : ''); 

const popover = ref(false);
</script>

<template>
  <figure class="figure">
    <img class="img" :src="src" :alt="alt" @click="popover = true"/>
    <figcaption class="figcaption" v-if="props.title || props.description">
      <p class="title" v-if="props.title">{{ title }}</p>
      <p class="description" v-if="props.description">{{ description }}</p>
    </figcaption>
  </figure>
  <div class="popover" v-if="popover" @click.self="popover = false">
    <button class="close-btn" @click="popover = false">
      <v-icon name="bi-x-lg" scale="1.75" title="Close Image Popover" />
    </button>
    <img class="popover-img" :src="src" :alt="alt" />
  </div>
</template>

I want my custom Vue component be able to render title and description with markdown syntax. Can you suggest me a nice method to do so?

+) I put images in public directory in srcDir. It is working, but it seems like images do not get bundled with this method. Is there any better method to do so?