Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Markdown lines starting with an inline Vue component are incorrectly considered to be a whole paragraph #4626

Open
4 tasks done
deqyra opened this issue Mar 18, 2025 · 0 comments
Labels
upstream Related to the dependencies

Comments

@deqyra
Copy link

deqyra commented Mar 18, 2025

Describe the bug

Line breaks in Markdown source are incorrectly rendered as actual line breaks when a Markdown source line begins with an inline Vue component. Consider this component:

<!-- TestComponent.vue -->
<template>
  <span style="display: inline; background-color: red">TestComponent</span>
</template>

...as well as the following Markdown:

<TestComponent /> This text, despite having
line breaks in it, should still be
rendered on a single line.

But it doesn't.

This unexpectedly renders as follows:

TestComponent  This text, despite having

line breaks in it, should still be rendered on a single line.

But it doesn't.

Note that this does not happen if the Markdown line starts with a bit of text instead of with the Vue component:

For some reason, <TestComponent /> this example
renders fine.
For some reason, TestComponent  this example renders fine.

Reproduction

  • Create a component with inline display style
  • Start a new Markdown paragraph with that component and continue across multiple Markdown lines
    • There must be no text before the component
  • The first line break within the Markdown source for that paragraph will render as an actual line break

A repro is available here: https://stackblitz.com/edit/vite-xxlcwfge?file=docs%2Findex.md

Expected behavior

The line break in the Markdown source should not render as an actual line break. The example from above should render as follows:

TestComponent  This text, despite having line breaks in it, should still be rendered on a single line.

But it doesn't.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
    Memory: 4.86 GB / 15.94 GB
  Binaries:
    Node: 22.14.0 - C:\Program Files\nodejs\node.EXE     
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD        
  Browsers:
    Edge: Spartan (44.19041.3636.0), Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    vitepress: ^1.6.3 => 1.6.3

Additional context

No response

Validations

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
upstream Related to the dependencies
Projects
None yet
Development

No branches or pull requests

2 participants