Markdown inside slots possible?

[moso]

Hi, I'm trying to make simple block wrappers, like tabs for code-blocks, etc. But whenever I wrap anything, it comes out as a string.

Maybe I'm tackling this too simple and need to render my slots in a very different way to include rendered Markdown, so this is more a question than a real issue.

Simplified example:

/src/components/component.vue:

<template>
  <div class="component">
    <slot />
  </div>
</template>

/pages/index.md:

# Hello

<Component>
 ```css
.class {
    display: flex;
}

The above will render the H1, but render the Vue component with the code block as a string:
```html
<h1>Hello</h1>

<div class="component">```css class{ display: flex; } ```</div>

Expected outcome:

<h1>Hello</h1>

<div class="component">
  <pre>
    <code class="language-css">
      <!-- code here -->
    </code>
  </pre>
</div>

It would be nice if the Markdown would still render, but inside the slot. So far, no Google search comes up with anything concrete, other than Nuxt has been able to do this seamlessly.

Any pointers appreciated.

[moso]

Nevermind.

After looking through Vitebook's code, I realised it works out of the box with a new line between the tag and the content.

So for anyone else looking for this:

<Component>

```css
.class {
  display: flex;
}

... will work flawlessly.

[meteorlxy]

The reason is that, your code should be valid markdown syntax first. Besides vue components, you can try with standard html tags (like <div>) with / without empty lines in raw markdown-it parsers.

Demo link