docs: do not need <wbr> anymore

[fi3ework]

Description

Currently, such as process.env.NODE_ENV = 'development' in markdown is splitted into two parts which has redundant padding and border-radius, making the docs look weird. 😬

before:

before.mp4

---

after:

after.mp4

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the PR Title Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[patak-dev]

I wonder if this is something that VitePress would want to have upstream, cc @kiaking

[kiaking]

Nice idea! However, looks like VitePress did fix this issue and maybe you can simple remove <wbr>...? VitePress Issue -> vuejs/vitepress#419

We're handling this in our markdown parser and it should be working.

FYI, Vite issue for this is currently open -> #5577

If it does not work, and if we need this css hack, not sure if we should add this to VitePress core to avoid adding unnecessary hacks as much as possible 🤔

[fi3ework]

@kiaking I tested removing <wbr> in dev and it works fine. I used to think this <wbr> was some fine-tuning to make the line break better 😂. I'll make an update.

[bluwy]

Neat! I didn't know VitePress had fixed this natively. Looks like it's working: https://deploy-preview-12234--vite-docs-main.netlify.app/guide/api-javascript.html

[patak-dev]

A lot better like this! Thanks Kia for the tip