\r\n```\r\n\r\nAlternatively, use the `desc` defined in the `container` to write Markdown syntax.\r\n\r\n```md\r\n::: demo src=\"../demo.vue\" title=\"Demo block\"\r\n\r\nThis is a `description` that can be written using Markdown.\r\n\r\n:::\r\n```\r\n\r\n### Describe the solution you'd like\r\n\r\nTo address this, I have created the [markdown-it-vitepress-demo](https://github.com/hairyf/markdown-it-vitepress-demo) plugin. I'm not sure if it can be helpful.\r\n\r\n### Describe alternatives you've considered\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\n- https://github.com/vuejs/vitepress/issues/987\r\n- https://github.com/vuejs/vitepress/issues/1349\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[2865],{"name":2866,"color":2867},"stale","ededed",2432,"vuejs","vitepress","open","feat(demo): built-in markdown plugin provides support for showcasing demo capabilities.","2024-07-17T14:37:26Z","https://github.com/vuejs/vitepress/issues/2432",0.7062117,{"description":2877,"labels":2878,"number":2880,"owner":2869,"repository":2870,"state":2871,"title":2881,"updated_at":2882,"url":2883,"score":2884},"### Is your feature request related to a problem? Please describe.\r\n\r\nVitePress' default theme is pretty ace, but right now it's not completely compatible with other CSS frameworks.\r\n\r\nFor example, the `vp-doc` formatting is baked in, and certain component class names are too general so they clash with intentionally-general CSS framework class names such as `menu`.\r\n\r\nIf one was to use VitePress to document an existing CSS framework, it would be difficult, as class names leak in both directions, breaking VitePress theme components and polluting demoed content.\r\n\r\n### Describe the solution you'd like\r\n\r\nThe `without-fonts` entry point goes some way to addressing this, but VitePress could go a little further, for example:\r\n\r\n- a `without-formatting` entry point to skip formatting in `vp-doc`\r\n- renaming general class names like `.menu` (assigned in `VPNavBar`; see `\u003CVPNavBarMenu class=\"menu\" />`)\r\n\r\nI'm currently working on migrating and documenting the excellent Spectre CSS docs and am using Vitepress.\r\n\r\nI'm developing an ejected and modified default theme which has already come some way to solving this problem:\r\n\r\n- [original](https://picturepan2.github.io/spectre/components/menu.html) (custom app)\r\n- [migrated](https://spectre-org.github.io/spectre-docs/docs/components/menu.html) (VitePress with modified default theme)\r\n - note the `vp-doc` formatting which is all Spectre CSS\r\n - some fixed, and some not-yet fixed clashes of general class names\r\n\r\nFor reference to the use case (documenting a 3rd-party framework) here is the raw markdown page:\r\n\r\n- https://raw.githubusercontent.com/spectre-org/spectre-docs/main/docs/components/menu.md\r\n\r\nNote that:\r\n\r\n- Spectre CSS (or any other 3rd-party CSS framework) is now able to be simply \"dropped in\"\r\n- there is no pollution between VitePress and the 3rd-party framework\r\n- VitePress' default components remain fully-styled and work as they were before\r\n- `vp-doc` content can be safely used to demo any 3rd party HTML elements and classes\r\n\r\nI think I know enough to fix the problems in my modified theme and either:\r\n\r\n- publish a new \"neutral\" theme\r\n- port the changes to the default theme (ideal outcome)\r\n\r\nThere's actually not that much work; it's:\r\n\r\n- renaming the general component classes\r\n- moving some `vp-doc` classes to other locations\r\n- creating an additional unstyled entrypoint such as `without-formatting`\r\n\r\n### Describe alternatives you've considered\r\n\r\nPublishing the modified theme standalone, but then of course it would not benefit from ongoing updates.\r\n\r\n### Additional context\r\n\r\nI am proposing a PR in the coming weeks to integrate these updates.\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[2879],{"name":2866,"color":2867},3021,"Make the default theme compatible with 3rd-party CSS frameworks","2023-11-06T14:43:58Z","https://github.com/vuejs/vitepress/issues/3021",0.7083309,{"description":2886,"labels":2887,"number":2889,"owner":2869,"repository":2870,"state":2871,"title":2890,"updated_at":2891,"url":2892,"score":2893},"### Is your feature request related to a problem? Please describe.\r\n\r\nI want to use UnoCSS in a VitePress project, just like what [unocss.dev](https://unocss.dev) does. However, simply copying their config cannot bring UnoCSS to the whole site.\r\n\r\nIn this [minimal demo on StackBlitz](https://stackblitz.com/edit/vitepress-unocss), there are 3 UnoCSS injections:\r\n- [x] In Markdown content, any UnoCSS element keeps their format but without style\r\n- [ ] In the hero of `index.md`, the element turns into a string\r\n- [x] Only in the feature cards, element and styles exists so the icon shows\r\n- [ ] Other cases haven't been checked\r\n\r\n### Describe the solution you'd like\r\n\r\nProvide some guide to allow UnoCSS injection, it may be better if there is a plugin to do that.\r\n\r\n### Describe alternatives you've considered\r\n\r\nBoth VitePress and UnoCSS are powered by Vite, if UnoCSS can be integrated into VitePress, it may bring a more customizable style with little cost.\r\n\r\n~~I don't know if it's better to request this feature after UnoCSS reaches v1.0, or request it on UnoCSS for now.~~\r\n\r\n### Additional context\r\n\r\n- [UnoCSS docs source](https://github.com/unocss/unocss/tree/main/docs)\r\n- [Guide of integrating UnoCSS into Vite](https://unocss.dev/integrations/vite)\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[2888],{"name":2866,"color":2867},2424,"Feature request: support UnoCSS generally","2023-08-03T10:15:33Z","https://github.com/vuejs/vitepress/issues/2424",0.7088452,{"description":2895,"labels":2896,"number":2898,"owner":2869,"repository":2870,"state":2871,"title":2899,"updated_at":2900,"url":2901,"score":2902},"### Is your feature request related to a problem? Please describe.\r\n\r\nsuch as a vue components library site……\r\nA common problem for a documentation page is to show how to use a component, both in code and with demo of live component.\r\n\r\n### Describe the solution you'd like\r\n\r\nlike this [https://github.com/flingyp/vitepress-demo-preview](https://github.com/flingyp/vitepress-demo-preview)\r\n\r\n### Describe alternatives you've considered\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[2897],{"name":2866,"color":2867},3270,"Feature request: Vue component source code demo","2024-01-18T18:48:08Z","https://github.com/vuejs/vitepress/issues/3270",0.713514,{"description":2904,"labels":2905,"number":2906,"owner":2869,"repository":2870,"state":2907,"title":2908,"updated_at":2909,"url":2910,"score":2911},"### Is your feature request related to a problem? Please describe.\r\n\r\nThe markdown of the component is expected to be written under the packages, not in the docs directory.\r\n\r\nLike Dumi: https://d.umijs.org/\r\n\r\nThis will make our documentation more maintainable.\r\n\r\nThis is important when developing monorepo projects.\r\n\r\n### Describe the solution you'd like\r\n\r\nThe directory structure is as follows\r\n\r\n```bash\r\n├── docs/\r\n│ ├── .vitepress/\r\n│ │ ├── dist/\r\n│ │ └── config.js\r\n│ └── index.md\r\n├── packages/\r\n│ └── package-A/\r\n│ ├── dist/\r\n│ ├── node_modules/\r\n│ ├── src/\r\n│ │ ├── ...\r\n│ │ ├── func-A/\r\n│ │ │ ├── __tests__/ # Jest\r\n│ │ │ ├── demos/ # Vue Demos\r\n│ │ │ │ ├── Basic.vue # Example Component\r\n│ │ │ │ └── Timer.vue # Example Component\r\n│ │ │ ├── index.md # API Markdown ☞☞ Expectation: Doc documentation can be written here, can be compiled by vitepress, instead of having to be written in the docs directory\r\n│ │ │ └── index.ts # Source Code\r\n│ │ ├── ...\r\n│ │ └── index.ts\r\n│ ├── README.md\r\n│ ├── package.json\r\n│ ├── tsconfig.json\r\n│ └── typings.d.ts\r\n├── .editorconfig\r\n├── .eslintignore\r\n├── .eslintrc.js\r\n├── .fatherrc.ts\r\n├── .gitignore\r\n├── .npmrc\r\n├── .prettierignore\r\n├── .prettierrc\r\n├── README.md\r\n├── lerna.json\r\n├── package.json\r\n├── pnpm-lock.yaml\r\n├── pnpm-workspace.yaml\r\n└── tsconfig.json\r\n```\r\n\r\n### Describe alternatives you've considered\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.vuejs.org).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[],987,"closed","Documentation in the same style as dumi","2023-02-04T00:04:07Z","https://github.com/vuejs/vitepress/issues/987",0.6867103,{"description":2913,"labels":2914,"number":2915,"owner":2869,"repository":2870,"state":2907,"title":2916,"updated_at":2917,"url":2918,"score":2919},"### Is your feature request related to a problem? Please describe.\r\n\r\nIn order to create good documentation of a standalone Vue component, we want to show many usage examples.\r\n\r\nEvery usage example is a Vue file.\r\n\r\nWe need to be able to import a Vue file in Vitepress, show its source code as CodeBlock.\r\n- Not just a single code block like you can already do in Vitepress, but a Codeblock with tabs on top that split up the source code in `template` / `script` / `style` tabs.\r\n- Also, another tab should say `example` rendering the actual imported Vue component.\r\n\r\n\r\n### Describe the solution you'd like\r\n\r\nThe ideal syntax would look something like this:\r\n```html\r\n\u003CCodeBlockComponent filename=\"blitz-form/Basics - Basic Example\" />\r\n```\r\nAnd here is a video of how it would render in Vitepress:\r\n\r\nhttps://user-images.githubusercontent.com/3253920/140631280-adae2d0b-47d9-4172-b105-f6f4ee5f41f4.mp4\r\n\r\n(I have styled this a little bit to fit my docs style, but of course the styling can be way more bare-bones and we can overwrite the styling with CSS.)\r\n\r\n\r\n\r\n### Describe alternatives you've considered\r\n\r\nI actually already finished this feature for VitePress. I created my custom solution.\r\n\r\nUnder the hood I'm using a combination of these import methods:\r\n```js\r\nimport(`../docs/${filename}.vue`) // for the component\r\n// and\r\nimport(`../docs/${filename}.vue?raw`) // for the source code\r\n```\r\n\r\n~~Everything works when I'm using the VitePress development server. However, as soon as I build and deploy my code to a hosting service, all the Code Blocks break.~~\r\n\r\n~~I searched a lot for solutions, but this is not my strongest point. This past week I tried a bunch of things but still haven't found out how to make it work.~~\r\n\r\n(See next comment, where I explain how I fixed it)\r\n\r\n### Additional context\r\n\r\nI would love to request for an official solution for what I'm trying to do.\r\n\r\nI believe a lot of developers who want to share a Vue component and whip up a quick VitePress documentation about their component, would love this feature.\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/coc)\r\n- [X] Read the [docs](https://vitepress.vuejs.org/).\r\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/master/.github/contributing.md).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[],437,"FR: Code Block that renders Vue file component and source code","2023-01-29T00:04:23Z","https://github.com/vuejs/vitepress/issues/437",0.6910846,{"description":2921,"labels":2922,"number":2923,"owner":2869,"repository":2870,"state":2907,"title":2924,"updated_at":2925,"url":2926,"score":2927},"### Is your feature request related to a problem? Please describe.\n\nI'm using VitePress to document our coding standards and our design system. I want to show examples of the code we would use (HTML and Vue components) *and* how that code would render.\r\n\r\nI can import and use Vue components in the markdown (and HTML) without issue. But to show both the \"live\" and \"source\" views of that code, I have to copy my live code into a separate markdown code block, which means now I have *two* blocks of code to manage and synchronize for each example.\n\n### Describe the solution you'd like\n\nI'd like a new directive for \"```\" code blocks that, when viewed in VitePress, shows up as a tabbed interface with two tabs: (1) the rendered version of that code (using the normal rendering done by VitePress, supporting Vue and HTML), and (2) the normal way the code block would be otherwise rendered.\r\n\r\nI *believe* this would simply require detecting this directive, duplicating the code within the block as non-fenced code, and wrapping the pair in a simple tabbed Vue component.\r\n\r\nObviously for more complex examples, the VitePress version of the live code will differ from what needs to be shown to the user, so that is a challenge (the Vue docs themselves have this challenge). But for simple examples of using Vue components and HTML with no additional script involved, it would really help.\r\n\r\nMy suggestion would be something like \"```html:live\", where the \":live\" bit either comes before or after any row number highlights (I don't think it would matter).\n\n### Describe alternatives you've considered\n\nCopying and pasting between markdown code blocks to markdown live code, keeping them synchronized as the code is updated.\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[],554,"\"Live\" Code Blocks","2023-01-21T14:20:27Z","https://github.com/vuejs/vitepress/issues/554",0.70066863,{"description":2929,"labels":2930,"number":2931,"owner":2869,"repository":2870,"state":2907,"title":2932,"updated_at":2933,"url":2934,"score":2935},"### Is your feature request related to a problem? Please describe.\n\nWe're using Custom Elements to encapsulate styles from our design system, so it'd be great to be able to tell Vitepress to ignore those tags.\r\n\r\nSuper lightweight example:\r\n\r\n```js\r\nclass ButtonExample extends HTMLElement {\r\n connectedCallback() {\r\n const designSystemCSS = '\u003Clink rel=\"stylesheet\" type=\"text/css\" href=\"designSystemURL\" />'\r\n const target = `\u003Cdiv id=\"app\">\u003C/div>`\r\n this.shadow = this.attachShadow({ mode: 'open' })\r\n this.shadow.innerHTML = designSystemCSS + target\r\n createApp(App) // App defined elsewhere ofc\r\n .mount(this.shadow.querySelector('#app'))\r\n }\r\n}\r\n```\n\n### Describe the solution you'd like\n\nProbably just being able to set `compilerOptions.isCustomElement` somewhere would be good enough?\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[],735,"Custom element support","2023-01-21T14:34:18Z","https://github.com/vuejs/vitepress/issues/735",0.70122206,{"description":2937,"labels":2938,"number":2949,"owner":2869,"repository":2870,"state":2907,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### Describe the bug\n\nJust like the Vite docs, I use custom styles in the `index.md` file using `\u003Cstyle module>`. I also use custom components in which I use `\u003Cstyle scoped>`.\r\n\r\nSince I updated from version `1.0.0` to the latest one (the one in the StackBlitz), the built page's styles are broken. In the dev preview everything looks like expected.\n\n### Reproduction\n\nOpen the StackBlitz Demo with this [link](https://stackblitz.com/edit/vite-1qtmk8?file=docs%2Findex.md).\r\n\r\nIf it does not run automatically, run `npm install && npm run dev`. It should look something like this:\r\n\r\n\r\n\r\nThen run `npm run docs:build && npm run docs:preview` and it will look like this:\r\n\r\n\r\n\r\nAs you can see, the hero image and its background are different and the cards are different as well.\n\n### Expected behavior\n\nI expected the built version to look just like the dev preview (or at least very close).\n\n### System Info\n\n```Text\nSystem:\r\n OS: Windows 10 10.0.19045\r\n CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics\r\n Memory: 6.45 GB / 15.35 GB\r\n Binaries:\r\n Node: 21.2.0 - C:\\Program Files\\nodejs\\node.EXE\r\n npm: 10.5.0 - C:\\Program Files\\nodejs\\npm.CMD\r\n pnpm: 9.1.2 - ~\\AppData\\Roaming\\npm\\pnpm.CMD\r\n Browsers:\r\n Edge: Chromium (127.0.2651.74)\r\n Internet Explorer: 11.0.19041.4355\r\n npmPackages:\r\n vitepress: ^1.3.1 => 1.3.1\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [x] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2939,2942,2945,2948],{"name":2940,"color":2941},"help wanted","008672",{"name":2943,"color":2944},"build","377ba8",{"name":2946,"color":2947},"upstream","BF29ED",{"name":2866,"color":2867},4098,"Styling discrepancies between dev and build","2025-01-05T04:42:47Z","https://github.com/vuejs/vitepress/issues/4098",0.7052693,{"description":2955,"labels":2956,"number":2957,"owner":2869,"repository":2870,"state":2907,"title":2958,"updated_at":2959,"url":2960,"score":2961},"### Is your feature request related to a problem? Please describe.\n\n当我在文档里插入图片发布后,图片中有部分内容在页面上较为模糊。我试过markdown-it-custom-attrs插件,但是好像没有生效。\n\n### Describe the solution you'd like\n\n在vitepress中集成图片灯箱的功能,或者有什么办法可以集成相关组件(希望给一个示例)\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[],2674,"能否增加一个图片点击放大的功能。","2023-08-01T00:04:35Z","https://github.com/vuejs/vitepress/issues/2674",0.7058447,["Reactive",2963],{},["Set"],["ShallowReactive",2966],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fMPEAtLzcb94jT0LBGwhcavmEGFf_7ChKhbMgY5tvmcI":-1},"/vuejs/vitepress/2091"]