\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.",[2867],{"name":2868,"color":2869},"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.6923376,{"description":2879,"labels":2880,"number":2884,"owner":2871,"repository":2872,"state":2885,"title":2886,"updated_at":2887,"url":2888,"score":2889},"### Describe the bug\n\nindex.md not support markdown\n\n### Reproduction\n\n\"I'm encountering an issue with VitePress where Markdown syntax in my index.md file doesn't seem to apply the expected styles on the homepage, whereas in VuePress, this works as anticipated. For instance, if I wish to include some introductory text on the main page and then guide users to the navigation bar, it appears that I need to manually write the CSS styles. Why can't I utilize Markdown for styling in this case?\"\n\n### Expected behavior\n\n\"I'm encountering an issue with VitePress where Markdown syntax in my index.md file doesn't seem to apply the expected styles on the homepage, whereas in VuePress, this works as anticipated. For instance, if I wish to include some introductory text on the main page and then guide users to the navigation bar, it appears that I need to manually write the CSS styles. Why can't I utilize Markdown for styling in this case?\"\n\n### System Info\n\n```Text\n\"I'm encountering an issue with VitePress where Markdown syntax in my index.md file doesn't seem to apply the expected styles on the homepage, whereas in VuePress, this works as anticipated. For instance, if I wish to include some introductory text on the main page and then guide users to the navigation bar, it appears that I need to manually write the CSS styles. Why can't I utilize Markdown for styling in this case?\"\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.",[2881],{"name":2882,"color":2883},"bug: pending triage","e99695",3409,"closed","index.md","2024-01-13T00:04:51Z","https://github.com/vuejs/vitepress/issues/3409",0.6473348,{"description":2891,"labels":2892,"number":2896,"owner":2871,"repository":2872,"state":2885,"title":2897,"updated_at":2898,"url":2899,"score":2900},"### Describe the bug\r\n\r\nSome of the code markdown extensions do not work when the language is `vue`.\r\n\r\nIn particular, `[!code ++]`, `[!code --]`, `[!code warning]`, `[!code error]` and `[!code focus]` just show the comments at the end of the line.\r\n\r\nChanging the language to something else fixes this, e.g. `htmx` or `ts`.\r\n\r\nThis only seems to happen in the template tags of a `vue` code block. The highlighting works absolutely fine in the script part. Please see reproduction for code examples, I can't figure out how to escape the triple backtick code blocks here! ☹️ \r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/vite-arupmh?file=docs%2Fexample.md\r\n\r\n### Expected behavior\r\n\r\nThe markdown extensions should work correctly and highlight the lines as per [the docs](https://vitepress.dev/guide/markdown#focus-in-code-blocks).\r\n\r\n### System Info\r\n\r\n```Text\r\nSystem:\r\n OS: macOS 14.1.2\r\n CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\r\n Memory: 488.47 MB / 16.00 GB\r\n Shell: 5.9 - /bin/zsh\r\nBinaries:\r\n Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node\r\n Yarn: 1.22.10 - /usr/local/bin/yarn\r\n npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm\r\nBrowsers:\r\n Chrome: 120.0.6099.234\r\n Firefox: 112.0.2\r\n Firefox Developer Edition: 107.0\r\n Safari: 17.1.2\r\n```\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\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] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2893],{"name":2894,"color":2895},"upstream","BF29ED",3503,"Markdown code extensions don't work in some situations","2025-02-01T04:42:47Z","https://github.com/vuejs/vitepress/issues/3503",0.6492178,{"description":2902,"labels":2903,"number":2905,"owner":2871,"repository":2872,"state":2885,"title":2906,"updated_at":2907,"url":2908,"score":2909},"### Describe the bug\n\nI want to use the vue component in vitepress. I have read the documentation on the official website, but when I do it, I encounter an error like this.\r\n```bash\r\n[plugin:vite:vue] Tags with side effect (\u003Cscript> and \u003Cstyle>) are ignored in client component templates.\r\n```\r\n\r\nI don't understand what I'm encountering, I just want to achieve the effect here in this vue document\r\n\r\n> https://cn.vuejs.org/guide/reusability/composables.html#vs-react-hooks\r\n\r\n\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vite-dn63jg?file=docs%2Fhooks%2FuseMouse.js,docs%2Fexample.md\n\n### Expected behavior\n\nThe documentation on the official website makes me understand the difficulty or the need for a better demo?\n\n### System Info\n\n```Text\nSystem:\r\n OS: Windows 11 10.0.22631\r\n CPU: (20) x64 13th Gen Intel(R) CoreT i7-13800H\r\n Memory: 17.07 GB / 31.74 GB\r\n Binaries:\r\n Node: 20.11.0 - ~\\AppData\\Local\\pnpm\\node.EXE\r\n npm: 10.2.4 - ~\\AppData\\Local\\pnpm\\npm.CMD\r\n pnpm: 8.14.1 - ~\\AppData\\Local\\pnpm\\pnpm.EXE\r\n Browsers:\r\n Edge: Chromium (120.0.2210.133)\r\n Internet Explorer: 11.0.22621.1\r\n npmPackages:\r\n vitepress: 1.0.0-rc.39 => 1.0.0-rc.39\n```\n\n\n### Additional context\n\nPlease tell me the correct way to write it, thank you\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.",[2904],{"name":2882,"color":2883},3485,"Using vue to report errors in markdown","2024-01-29T00:04:28Z","https://github.com/vuejs/vitepress/issues/3485",0.66717553,{"description":2911,"labels":2912,"number":2916,"owner":2871,"repository":2872,"state":2885,"title":2917,"updated_at":2918,"url":2919,"score":2920},"### Describe the bug\n\nwhen I bump vitepress to `1.0.0-rc.26`, I found the styles in `\u003Cstyle>` were not included in the packaged product.\r\n\r\n The style here is normal in the development environment, but it doesn't work after packing.\r\n\r\n``` vue\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"box\">Preview after packing, The text color is expected to be red\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cstyle>\r\n.box {\r\n color: red;\r\n}\r\n\u003C/style>\r\n``` \r\n\r\nI try downgraded to `1.0.0-rc.25`, it was normal.\n\n### Reproduction\n\nreproduction link:\r\n[https://stackblitz.com/edit/vite-xmetfv?file=docs%2FDemo.vue](https://stackblitz.com/edit/vite-xmetfv?file=docs%2FDemo.vue)\r\n\n\n### Expected behavior\n\nPackaged for preview and styles can also take effect\r\n\r\nrelated documents:\r\n[https://vitepress.dev/guide/using-vue#script-and-style](https://vitepress.dev/guide/using-vue#script-and-style)\n\n### System Info\n\n```Text\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)\r\n CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics\r\n Memory: 6.16 GB / 7.44 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node\r\n Yarn: 1.22.19 - /mnt/c/Program Files/nodejs/yarn\r\n npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm\r\n pnpm: 8.10.5 - ~/.nvm/versions/node/v18.18.2/bin/pnpm\r\n bun: 1.0.12 - ~/.nvm/versions/node/v18.18.2/bin/bun\r\n npmPackages:\r\n vitepress: 1.0.0-rc.26 => 1.0.0-rc.26\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.",[2913],{"name":2914,"color":2915},"build","377ba8",3216,"Using SFC in markdown, styles in the `\u003Cstyle>` tag is not effect.","2023-11-25T00:04:34Z","https://github.com/vuejs/vitepress/issues/3216",0.6706152,{"description":2922,"labels":2923,"number":2927,"owner":2871,"repository":2872,"state":2885,"title":2928,"updated_at":2929,"url":2930,"score":2931},"\u003C!--\r\nNOTE:\r\nVitePress is still WIP, and it is not compatible with VuePress.\r\nPlease do not open issue about default theme missing features or something doesn't work like VuePress.\r\n-->\r\n\r\n**Describe the bug**\r\n`build`的时候报错,猜测可能是md文件名不支持中文\r\n\r\n\r\n**System Info**\r\n- vitepress version: v0.9.2\r\n- vite version: v1.0.0-rc.13\r\n- Node version: v12.4.0\r\n- OS version: Macos Big Sur 11.1\r\n",[2924],{"name":2925,"color":2926},"need more info","bdbefc",186,"Does markdown file name not support Chinese?","2023-01-21T16:20:25Z","https://github.com/vuejs/vitepress/issues/186",0.67227954,{"description":2933,"labels":2934,"number":2941,"owner":2871,"repository":2872,"state":2885,"title":2942,"updated_at":2943,"url":2944,"score":2945},"### 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.",[2935,2938,2939,2940],{"name":2936,"color":2937},"help wanted","008672",{"name":2914,"color":2915},{"name":2894,"color":2895},{"name":2868,"color":2869},4098,"Styling discrepancies between dev and build","2025-01-05T04:42:47Z","https://github.com/vuejs/vitepress/issues/4098",0.6846095,{"description":2947,"labels":2948,"number":2952,"owner":2871,"repository":2872,"state":2885,"title":2953,"updated_at":2954,"url":2955,"score":2956},"### Describe the bug\n\n1. 组件中 style scoped 使用了 bootstrap,某些 class 样式出不来,比如下面 `rounded`;\r\n\r\n\r\n2. 如果在 vue 组件的 script 导入 bootstrap,则会影响默认主题的样式,比如下面标题\r\n\r\n\r\n3. 不管是使用 slots 还是使用全局注册组件,都是一样的问题;\n\n### Reproduction\n\n默认主题结合 bootstrap 很容易重现。\n\n### Expected behavior\n\n我希望在 vitepress 的组件中使用 bootstrap 快速开发。\n\n### System Info\n\n```sh\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)\r\n CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz\r\n Memory: 4.30 GB / 7.72 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 19.5.0 - ~/.nvm/versions/node/v19.5.0/bin/node\r\n npm: 9.6.4 - ~/.nvm/versions/node/v19.5.0/bin/npm\r\n pnpm: 8.6.9 - ~/.local/share/pnpm/pnpm\r\n npmPackages:\r\n vitepress: 1.0.0-beta.6 => 1.0.0-beta.6\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.",[2949],{"name":2950,"color":2951},"theme","0754FB",2683,"默认主题添加组件使用 bootstrap 样式没有预期","2023-08-18T00:04:15Z","https://github.com/vuejs/vitepress/issues/2683",0.6863488,{"description":2958,"labels":2959,"number":2961,"owner":2871,"repository":2872,"state":2885,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Describe the bug\n\nWhy does the markdown.theme.xxx theme setting not take effect. I configured the theme for the markdown as follows.\r\n```js\r\nexport default defineConfig({\r\n markdown: {\r\n theme: {\r\n light: 'dark-plus',\r\n dark: 'dark-plus',\r\n }\r\n },\r\n})\r\n````\r\nbut only correctly displayed the theme in dark mode, \r\n\r\n\r\nwhile the background of the code block turned white in light mode. \r\n\r\n\r\n\r\n\r\nWhat I hope is that the background of the code blocks in dark and light modes is black.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vite-axs5w5?file=docs%2F.vitepress%2Fconfig.ts,docs%2Findex.md,docs%2Fexample.md\n\n### Expected behavior\n\nIf I explicitly set `markdown.theme` as only one theme, the color of the code block should be displayed consistently in dark and light modes\n\n### System Info\n\n```Text\nSystem:\r\n OS: Windows 11 10.0.22621\r\n CPU: (32) x64 AMD Ryzen 9 7945HX with Radeon Graphics\r\n Memory: 19.24 GB / 31.69 GB\r\n Binaries:\r\n Node: 18.18.0 - D:\\myDownload\\nodejs\\node.EXE\r\n npm: 9.8.1 - D:\\myDownload\\nodejs\\npm.CMD\r\n pnpm: 8.7.6 - D:\\myDownload\\nodejs\\pnpm.CMD\r\n Browsers:\r\n Edge: Chromium (119.0.2151.72)\r\n Internet Explorer: 11.0.22621.1\r\n npmPackages:\r\n vitepress: 1.0.0-rc.31 => 1.0.0-rc.31\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.",[2960],{"name":2882,"color":2883},3261,"The markdown.theme.xxx theme is not displayed correctly in light mode","2023-12-04T00:04:54Z","https://github.com/vuejs/vitepress/issues/3261",0.6875382,{"description":2967,"labels":2968,"number":2972,"owner":2871,"repository":2872,"state":2885,"title":2973,"updated_at":2974,"url":2975,"score":2976},"\u003C!--\r\nNOTE:\r\nVitePress is still WIP, and it is not compatible with VuePress.\r\nPlease do not open issue about default theme missing features or something doesn't work like VuePress.\r\n-->\r\n\r\n**Describe the bug**\r\nIn the markdown file, When reference a image file with encoded URL, it works in the dev mode, but it would faild to build.\r\n\r\n**To Reproduce**\r\nSteps to reproduce the behavior:\r\n1. a image file named `image (01).png`.\r\n1. a markdown file with content like this: ``\r\n1. run `vitepress build`\r\n\r\n**Expected behavior**\r\nShould build successfully.\r\n\r\n**System Info**\r\n- vitepress version: 0.11.5\r\n- vite version: 2.0.0-beta.62\r\n- Node version: 2.0.0-beta.62\r\n- OS version: Windows 10\r\n",[2969],{"name":2970,"color":2971},"duplicate","cfd3d7",220,"can not handle encoded image URLs in build mode","2023-01-21T16:23:56Z","https://github.com/vuejs/vitepress/issues/220",0.6886759,["Reactive",2978],{},["Set"],["ShallowReactive",2981],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f60A3XEPfcUtgBAV4bo87oKj3Y5IC9wyDWi3YJL92x1k":-1},"/vuejs/vitepress/800"]