Multiline vue-components transform error

[xxholly32]

Describe the bug

index.md with

<foo-bar>
xxx
</foo-bar>

will throw error

[vite] SFC template compilation error: 
docs/index.md:4:1
Element is missing end tag.
1  |  
2  |  <template><div><h1 id="test"><a class="header-anchor" href="#test" aria-hidden="true">#</a> test</h1>
3  |  <foo-bar>
   |            ^
4  |  <p>xxx
5  |  </foo-bar></p>

docs/index.md:5:11
Invalid end tag.
3  |  <foo-bar>
4  |  <p>xxx
5  |  </foo-bar></p>
   |            ^
6  |  </div></template>

To Reproduce
Steps to reproduce the behavior:

clone my repo

run npm i && npm run docs

Expected behavior
A clear and concise description of what you expected to happen.

no error or warning and transform will be correct

System Info

• vitepress version:0.6.0
• vite version:1.0.0-rc.3
• Node version:v12.16
• OS version:10.15

[xxholly32]

and vitepress cant transform teleport

[LeBenLeBen]

I think you made a mistake and mixed the closing tag of a p with foo-bar. Can you post the whole template?

[xxholly32]

this p tag is not in my code, it add by markdown-it. see my demo

[petedavisdev]

This is a feature of markdown-it

You can either do this: <foo-bar>xxx</foo-bar> which will render xxx directly as html within the component slot.

Or you can leave empty lines at the start and end of your content like this:

<foo-bar>

## xxx
yyy

</foo-bar>

Which will render <h2>xxx</h2><p>yyy</p> within your component slot.

This is a nice feature that allows you to write markdown content inside a component - here's an example.

I've submitted a PR to get this included in the VuePress docs.

[xxholly32]

yeah , i got it.as your said It's not a problem, it's just that I don't understand Markdown very well. need use more space-line for markdown