Unindented list inside HTML tag causes error
I'm not sure if I should file this issue to this repository or slidevjs/prettier-plugin. Excuse me if this is the wrong repo.
Describe the bug
The following syntax is proper. (Notice that the inner list is indented)
<div>
<div>
- A
- B
</div>
</div>
If I remove the indent (which prettier-plugin-slidev does), I got an error:
<div>
<div>
- A
- B
</div>
</div>
Error:
[plugin:vite:vue] Element is missing end tag.
/Users/ryotaushio/code/slidev-repro/slides.md__slidev_3.md:11:1
9 | <p>A</p>
10 | </li>
11 | <li>
| ^
12 | <p>B</p>
13 | </div>
at createCompilerError (/Users/ryotaushio/code/slidev-repro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1364:17)
at emitError (/Users/ryotaushio/code/slidev-repro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2991:5)
at Object.onclosetag (/Users/ryotaushio/code/slidev-repro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2350:13)
at Tokenizer.stateInClosingTagName (/Users/ryotaushio/code/slidev-repro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:785:16)
at Tokenizer.parse (/Users/ryotaushio/code/slidev-repro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1143:16)
at Object.baseParse (/Users/ryotaushio/code/slidev-repro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3030:13)
at Object.parse (/Users/ryotaushio/code/slidev-repro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.js:910:23)
at Object.parse$1 [as parse] (/Users/ryotaushio/code/slidev-repro/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1801:24)
at createDescriptor (file:///Users/ryotaushio/code/slidev-repro/node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected][email protected][email protected][email protected]_/node_modules/@vitejs/plugin-vue/dist/index.js:79:42)
at transformMain (file:///Users/ryotaushio/code/slidev-repro/node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected][email protected][email protected][email protected]_/node_modules/@vitejs/plugin-vue/dist/index.js:1633:33)
Minimal reproduction
Steps to reproduce the behavior:
- Run this repro example: https://github.com/RyotaUshio/slidev-repro
git clone https://github.com/RyotaUshio/slidev-repro.git
cd slidev-repro
pnpm i
pnpm dev
- The third page causes the error
Environment
- Slidev version: 52.6.0
- Browser: Google Chrome 142.0.7444.60
- OS: macOS 15.5
@RyotaUshio i would like to work on this bug..Assign it to me
Looks like an upstream bug (markdown-it): https://markdown-it.github.io/#md3=%7B%22source%22%3A%22%3Cdiv%3E%5Cn%20%20%3Cdiv%3E%5Cn%5Cn-%20A%5Cn-%20B%5Cn%5Cn%20%20%3C%2Fdiv%3E%5Cn%3C%2Fdiv%3E%22%2C%22defaults%22%3A%7B%22html%22%3Atrue%2C%22xhtmlOut%22%3Afalse%2C%22breaks%22%3Afalse%2C%22langPrefix%22%3A%22language-%22%2C%22linkify%22%3Afalse%2C%22typographer%22%3Afalse%2C%22_highlight%22%3Afalse%2C%22_strict%22%3Afalse%2C%22_view%22%3A%22src%22%7D%7D
@crazylogic03 i could also help you to solve issue .. if okay would love to collaborate and work with you @kermanx please assign this issue too me also..
@Bitshifter-9 Would love to collaborate with you
I reconsidered the issue and realized that the current behavior might be the expected behavior. The formatted markdown can be considered as:
<div>
<div>
- A
- B
</div>
</div>
which has unmatched tags.
I also find that marked.js has the same behavior as markdown-it: Demo.
In that case, Prettier is the root cause of the issue. Forcibly fixing this error in Slidev may cause our markdown to conflict with the standards.
@kermanx Could you review the latest commit and let me know if you spot any issues?