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