vuepress / core

Vue-Powered Static Site Generator
https://vuepress.vuejs.org
MIT License
2.17k stars 922 forks source link

[Bug report] wrong position of '</div>' generated #1497

Closed DnullP closed 4 months ago

DnullP commented 4 months ago

Description

Here is the original markdown:

## H1

<div style="display: flex; justify-content: space-between;">
  <div style="flex: 1; text-align: left;">
123
  </div>
  <div style="flex: 1; text-align: left;">

### H2

- 3
- 2
- 1

  </div>

</div>

text_3

The vue file generated is as below:

<template><div><h2 id="h1" tabindex="-1"><a class="header-anchor" href="#h1"><span>H1</span></a></h2>
<div style="display: flex; justify-content: space-between;">
  <div style="flex: 1; text-align: left;">
123
  </div>
  <div style="flex: 1; text-align: left;">
<h3 id="h2" tabindex="-1"><a class="header-anchor" href="#h2"><span>H2</span></a></h3>
<ul>
<li>
<p>3</p>
</li>
<li>
<p>2</p>
</li>
<li>
<p>1</p>
</div>       <!--- This '</div>' is on a wrong position -->
</li>
</ul>
</div>
<p>text_3</p>
</div></template>

Here is the error:

[vite:vue] Element is missing end tag.
file: /home/dnull/project/Dnull-Blog-v2/docs/.vuepress/.temp/pages/posts/SE/SE-note.html.vue:30:1
✖ Compiling with vite - failed in 1.51s
SyntaxError: Element is missing end tag.
    at createCompilerError (/home/dnull/project/Dnull-Blog-v2/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:1328:17)
    at emitError (/home/dnull/project/Dnull-Blog-v2/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2791:5)
    at Object.onclosetag (/home/dnull/project/Dnull-Blog-v2/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2185:13)
    at Tokenizer.stateInClosingTagName (/home/dnull/project/Dnull-Blog-v2/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:750:16)
    at Tokenizer.parse (/home/dnull/project/Dnull-Blog-v2/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:1110:16)
    at Object.baseParse (/home/dnull/project/Dnull-Blog-v2/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2823:13)
    at Object.parse (/home/dnull/project/Dnull-Blog-v2/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:633:23)
    at Object.parse$2 [as parse] (/home/dnull/project/Dnull-Blog-v2/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1856:24)
    at createDescriptor (file:///home/dnull/project/Dnull-Blog-v2/node_modules/@vitejs/plugin-vue/dist/index.mjs:74:43)
    at transformMain (file:///home/dnull/project/Dnull-Blog-v2/node_modules/@vitejs/plugin-vue/dist/index.mjs:2367:34)

This doc is rendered well on the vscode.

Reproduction

https://stackblitz.com/edit/vuepress-zsvgfs?file=docs%2FREADME.md

Used Package Manager

npm

System Info

System:
    OS: Linux 6.5 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 5.59 GB / 15.35 GB
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 21.4.0 - ~/.nvm/versions/node/v21.4.0/bin/node
    Yarn: Not Found
    npm: 10.2.4 - ~/.nvm/versions/node/v21.4.0/bin/npm
    pnpm: Not Found
    bun: Not Found
  Utilities:
    Git: 2.34.1 - /usr/bin/git
  Browsers:
    Chrome: 121.0.6167.160
  npmPackages:
    @vuepress/bundler-vite: ^2.0.0-rc.7 => 2.0.0-rc.7 
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli:  2.0.0-rc.7 
    @vuepress/client:  2.0.0-rc.7 
    @vuepress/core:  2.0.0-rc.7 
    @vuepress/markdown:  2.0.0-rc.7 
    @vuepress/shared:  2.0.0-rc.7 
    @vuepress/utils:  2.0.0-rc.7 
    vue: ^3.4.0 => 3.4.18 
    vue-router: ^4.2.5 => 4.2.5
meteorlxy commented 4 months ago

That's as expected. You can try it here

If you put the ending </div> like this, it will be treated as part of the list item.

image

You can fix it by removing the 2 indents

Be careful when mixing html and markdown syntax together

Mister-Hope commented 4 months ago

another solution is removing this space, so that markdown parsers ends the list correctly,

but 4 and more space could still be problematic because they will be regarded as code block.