How to render markdown in component

[bangbangde]

I want to implement a component to display the markdown source code on the left and the rendering results on the right.

But I don't know how to render markdown in the component.

My expected usage is as follows:

---
title: demo
---
<ViewSource>
# hello
</ViewSource>

<script setup>
import ViewSource from "./ViewSource.vue"
</script>

[fzdwx]

same

[brc-dd]

Need to write a markdown-it plugin that duplicates that wrapped code for you 👀 .

[fzdwx]

Need to write a markdown-it plugin that duplicates that wrapped code for you eyes .

Yes, this approach is possible, but how do I use render in vitepress? Is it possible to provide this api?

[brc-dd]

The markdown rendering is done server-side. The renderer API is already exposed, but it won't work inside a Vue component.

[fzdwx]

The markdown rendering is done server-side. The renderer API is already exposed, but it won't work inside a Vue component.

Thank you for your answer !

[dwgray]

I'm interested in doing the same thing (I think): use a markdown-it plugin that will let me write some sample code once in a markdown file and have it rendered both as the running vue demo and the formatted code.

For instance:

::: Demo
<ASampleComponent>
  <p>Some vue.js code</p>
</ASampleComponent>
:::

Is transformed into:

<MyCustomContainer>
  <ASampleComponent>
    <p>Some vue.js code</p>
  </ASampleComponent>
</MyCustomContainer>

```vue-html
  <ASampleComponent>
    <p>Some vue.js code</p>
  </ASampleComponent>
```

and then rendered by the system.

Is this the same problem? And if so, could someone give me a bit more detail on how the renderer is exposed? If you got something working @fzdwx could you share some details>

[fzdwx]

No, i mean is:

// xxx.md
---
title: Demo
---

<CustomeCommpoent>
# hello world

- 123
- 456

</CustomeCommpoent>

To

<h1>hello world</h1>

<ul>
    <li>123<li/>
    <li>456<li/>
</ul>

[anatolinicolae]

Any tips on how to achieve components such Mintlify's Callout Boxes?

Something along the lines of:

---
title: demo
---

Look at this note:

<Note>This adds a note in the content as in [Mintlify's Callout Boxes](https://mintlify.com/docs/content/components/callouts)</Note>

[brc-dd]

We already have those: https://vitepress.dev/guide/markdown#custom-containers

You can customize them using CSS if you want. Or if you want to register other containers, you can use markdown-it-container plugin. You can also just register a Note component globally via theme file and use it in your markdown files. But for it work, you'll need to put an empty line after its opening tag to separate markdown block.

[anatolinicolae]

I'm aware of core custom containers but the second part is very insightful, thanks! 🙃

I gave it a try at first and inner Markdown wasn't properly rendering. However, adding the empty line after opening does make it work. Any specific reason for the empty line required in such case?

[brc-dd]

It's required by the spec to separate markdown content and html blocks: https://spec.commonmark.org/0.30/#html-blocks

[boxsnake]

What I get is:

<template>
  <div v-html="renderedContent"></div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance } from 'vue'
import type { Slot } from 'vue'

const instance = getCurrentInstance()

// This get the rawContent (markdown text) from default slot
const rawContent = computed<string>(() => {
  const defaultSlot: Slot | undefined = instance?.slots.default
  if (!defaultSlot) return ''
  const renderedSlots = defaultSlot()
  if (renderedSlots.length > 0)
    return renderedSlots[0].children?.toString().trim() ?? ''
  return ''
})

// This render content to HTML
const renderedContent = computed(() => {
  // TODO: parse rawContent with `markdown-it` and return rendered HTML
})
</script>

That's it.

---

That TODO is because I did not figure out a way to get markdown-it in vitepress, import of createMarkdownRenderer from vitepress will give an error in TS. And, why I want the markdown-it in vitepress rather than raw markdown-it package is because the vitepress version has pre-defined plugins. Hope someone can help and reply to this.

---

Note: For web security, you may need to use something like vue-dompurify-html package instead of v-html.