The value of the class of the pre tag is truncated

[jerrywu001]

Describe the bug

online demo: https://stackblitz.com/edit/vitejs-vite-79ocfq?file=docs%2Findex.md

1. Register a public component. called SandBox.

// docs/components/SandBox.vue
ctx.app.component('SandBox', SandBox);

2. Use markdown-it-direcitve-webcomponents plugin.

import { createRequire } from 'module';
import { defineConfig } from 'vitepress';

const require = createRequire(import.meta.url);

export default defineConfig({
  markdown: {
    config(md) {
      md.use(require('markdown-it-directive')).use(
        require('markdown-it-directive-webcomponents'),
        {
          components: [
            {
              present: 'both',
              name: 'sandbox',
              tag: 'sand-box',
              allowedAttrs: ['readonly', 'closabletabs', 'template'],
              parseInner: true,
            },
          ],
        }
      );
    },
  },
});

3. So I can use it like this in .md.

4. The expect effect is as follows

https://vue3-npm-template.netlify.app/get-started/introduction.html#demo

But actually:

Version 1.0.0-alpha.31 does not have this problem.

This issue starts from 1.0.0-alpha.32.

See: https://github.com/vuejs/vitepress/commit/a684b67ec084fdc3b3a300ffbdd21e19fdcf7b1e#diff-caaa5859b69d40532a36e00cd217b000c7653293a148088a1dbc0275e8c56570

Because The value of the class of the pre-tag is truncated.

Reproduction

See: https://stackblitz.com/edit/vitejs-vite-79ocfq?file=docs%2Findex.md

Expected behavior

Expected to happen:

https://vue3-npm-template.netlify.app/get-started/introduction.html#demo

The issue starts from 1.0.0-alpha.32.

See: https://github.com/vuejs/vitepress/commit/a684b67ec084fdc3b3a300ffbdd21e19fdcf7b1e#diff-caaa5859b69d40532a36e00cd217b000c7653293a148088a1dbc0275e8c56570

Because The value of the class of the pre-tag is truncated.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    vitepress: ^1.0.0-alpha.44 => 1.0.0-alpha.44

Additional context

Version 1.0.0-alpha.31 does not have this problem.

This issue starts from 1.0.0-alpha.32.

See: https://github.com/vuejs/vitepress/commit/a684b67ec084fdc3b3a300ffbdd21e19fdcf7b1e#diff-caaa5859b69d40532a36e00cd217b000c7653293a148088a1dbc0275e8c56570

Validations

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

[brc-dd]

You can write a custom plugin to do some stuff like this: https://github.com/brc-dd/sandpack-vitepress-demo

[jerrywu001]

You can write a custom plugin to do some stuff like this: https://github.com/brc-dd/sandpack-vitepress-demo

thanks

[jerrywu001]

I appreciate your help. I have written a plugin for vitepress. So we can use Sandpack as a directive in the markdown file.

Docs: https://vitepress-sandbox.js-bridge.com/get-started/introduction.html

Github: https://github.com/jerrywu001/vitepress-plugin-sandpack

@brc-dd