vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
13.25k stars 2.14k forks source link

Invalid parsing of `|` under the backticks in markdown tables #4338

Closed Veetaha closed 3 weeks ago

Veetaha commented 3 weeks ago

Describe the bug

I tried writing this table:

| Form                            | Meaning
|---------------------------------|----------------------------
| `#[builder(with = |...| expr)]` | Custom *infallible* closure

and this was rendered:

image

I assume the | inside of backticks is invalidly interpreted as the termination of the cell.

Validations

brc-dd commented 3 weeks ago

It's same as github.

| Form                            | Meaning
|---------------------------------|----------------------------
| `#[builder(with = |...| expr)]` | Custom *infallible* closure

is rendered as

Form Meaning
#[builder(with = |...| expr)] Custom infallible closure

You'll need to escape | using backslash:

| Form                            | Meaning
|---------------------------------|----------------------------
| `#[builder(with = \|...\| expr)]` | Custom *infallible* closure
Form Meaning
#[builder(with = \|...\| expr)] Custom infallible closure

spec - https://github.github.com/gfm/#example-200

You should use something like https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint to easily spot these or format your code using prettier or something that supports gfm.

image
Veetaha commented 3 weeks ago

Thanks for the clarification! I've added prettier