The layout of vue-html code block in line number mode

[Jinjiang]

Describe the bug

I found in vue-html code blocks + line number mode, there is no line-numbers-mode CSS class on the div wrapper, which leads to the layout bug like below:

Reproduction

index.md:

\```html
<div id="event-handling">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
\```

\```vue-html
<div id="event-handling">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
\```

.vitepress/config.js:

module.exports = () => ({
  markdown: {
    lineNumbers: true
  }
})

Expected behavior

By manually adding the CSS class in devtools, it goes normal.

System Info

System:
    OS: macOS 13.0
    CPU: (8) arm64 Apple M1
    Memory: 130.56 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.18 - ~/.yarn/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Safari: 16.0
  npmPackages:
    vitepress: 1.0.0-alpha.4 => 1.0.0-alpha.4

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.