Expose markdown/markdoc render functions to be used programmatically

[ayZagen]

Body

Summary

Currently there is no way to render a string programmatically with markdown/markdoc integration. For precise control over our content this would be great improvement.

Why?

In my use case I try to render OpenApi documents with astro. So each path inside the document contains description. The description field could be markdown/markdoc. I spent my whole week for how to integrate the process with the current markdoc integration but I couldn't find a way. In Nuxt there is a ContentRenderer component and when you pass there the markdown string it renders correctly by using your existing config (Custom components, plugins etc.)

I tried using loader api with v5 but I couldn't make it work unless I extract the description fields as custom files and honestly even if it would have worked it seems totally development overhead for a such simple use case.

Astro already have a render function exposed from astro:content but it doesn't work without using getEntry.

My proposal is actually for the content layer being as dynamic as possible for covering all use cases. Currently it is completely file based.

Example

---
import { MarkdocRenderer } from "astro:content";
const data =`# example markdoc`
---

<MarkdocRenderer content={data} />

Or as a function

---
import { renderString } from "astro:content";

const data =`# example markdoc`

const Content = await renderString(data, { type: "markdoc" })
---

<Content />

This would remove lots of headaches and provide more control to the end user.

[spaceemotion]

I just had the same case and got help on the Astro discord. This is what @dreyfus92 came up with:

---
import Markdoc from '@markdoc/markdoc';
import markdocConfig from '../../markdoc.config.mjs';
import { Renderer } from '@astrojs/markdoc/components';

const { content } = Astro.props;

const ast = Markdoc.parse(content);
const stringifiedAst = JSON.stringify(ast);
---

<Renderer config={markdocConfig as any} stringifiedAst={stringifiedAst} /> 

For the time being, this worked for our specific use case, but it might not cover all cases.