Expose the built-in markdown parser to render markdown-valued variables with

[aentwist]

Is your feature request related to a problem? Please describe.

My CMS stores markdown values in frontmatter data. For example, an intro section intro with a markdown string value. Currently, trying to access it in the page with {{ $frontmatter.intro }} just renders it as a string (a direct result of the markdown -> Vue -> HTML pipeline). What is the recommended way to call the markdown parser on it?

Describe the solution you'd like

It would be nice to see this exposed somehow (getting the built-in markdown-it instance, for example).

Describe alternatives you've considered

I could install markdown-it separately and use it that way?

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[aentwist]

Well, it just occurred to me that this use case is probably unusual... so allow me to elaborate.

I want to build a landing page and allow non-technical users to edit specific content (potentially using rich text I guess?) without being exposed to the structure.

My strategy is to use a custom theme that makes use of frontmatter keys to "slot in" content into specific places in the page instead of allowing the whole page to be edited with the CMS's special "body" frontmatter field (that makes up the non-frontmatter, or main, markdown content for pages).

[MetRonnie]

This would be really handy. My use case is to auto-document an API - long story short I have a script that outputs a markdown snippet from Python source code, and I am loading this into a page.

// foo.data.js
import { execSync } from 'child_process'

export default {
  load: () => execSync('python3 ./script-that-outputs-md.py').toString()
}

<!-- page.md -->
<script setup>
import { data } from './foo.data.js'
</script>

# My API

{{ data }}

This just renders the markdown snippet as an unformatted string.

However I was able to figure out by poking about the vitepress source code that you can use an undocumented function called createMarkdownRenderer():

// foo.data.js
import { execSync } from 'child_process'
import { createMarkdownRenderer } from 'vitepress'

export default {
  load: async () => {
    const md = await createMarkdownRenderer('')
    return md.render(
      execSync('python3 ./script-that-outputs-md.py').toString()
    )
  }
}

 <!-- page.md -->
 # My API

-{{ data }}
+<div v-html="data"></div>

I think this ought to be straightforward to expose in a more user-friendly and documented way?

[Aganivi]

createMarkdownRenderer don't seem to work？

[Marhc]

+1

[adiroiban]

Having a public API to get the globlal markdownit instance would be nice.

The main code is something like this

<script setup lang="ts">
import {useData} from 'vitepress'
import markdownit from 'markdown-it'
const {frontmatter} = useData()
const md = markdownit({
  html: true,
  linkify: true,
  typographer: true,
})
</script>

<template>
  <span
    v-html="md.renderInline(frontmatter.topSection.note)"
    class="font-display block text-base font-semibold text-red-500"
  >
</template>

As a first step, it woud be nice to have import {md} from 'vitepress' so that we get the markdown instance already configured

Better yet. something like <vp-md :model="frontmatter.topSection.note" inline class="some class"> should help reduce the boilerplate

[adiroiban]

I ended up using something like this... via the transformPageData hook

I wanted to have markdown render for some of the frontmatter values

I get the general markdown renderer only once... I don't know how else to get it

    async transformPageData(pageData, { siteConfig}) {
        if (!global_md) {
            // Create the markdown renderer only once.
            global_md = await createMarkdownRenderer(
                siteConfig.srcDir,
                siteConfig.markdown,
                siteConfig.site.base,
                siteConfig.logger
            )
        }

        // Render inline markdown for frontmatter ending with _md
        Object.keys(pageData.frontmatter).forEach(key => {
            if (!key.endsWith('_md')) {
                return
            }
            pageData.frontmatter[key] = global_md.renderInline(
                pageData.frontmatter[key]
            )
        })
    },

It would be nice to have some sort of "official" support, with link validation