\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.",[2888],{"name":2866,"color":2867},2432,"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.7126512,{"description":2895,"labels":2896,"number":2897,"owner":2869,"repository":2870,"state":2871,"title":2898,"updated_at":2899,"url":2900,"score":2901},"### Is your feature request related to a problem? Please describe.\n\nWhen using Vue templates, the Markdown renderer processes them correctly and compiles them. However, in the title, sidenav, and local search (path), the Vue templates are not rendered and are displayed as raw templates.\n\n\u003Cimg width=\"537\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/db835d1f-1084-41c9-bf1c-aa329f4609eb\" />\n\n\u003Cimg width=\"308\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/0e1beb6b-d06b-436c-b106-c924fead87ab\" />\n\n\u003Cimg width=\"931\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/aef6f71a-fa28-4b7c-b512-e6386e18159a\" />\n\n### Describe the solution you'd like\n\nIn my [pull request](https://github.com/vuejs/vitepress/pull/4630), I've introduced custom components that can be overridden in the `enhanceApp` function. In these custom components, I can add custom logic for rendering text, such as using the Vue compile function. \n\nAdditionally, I added a flag to skip the title update, allowing for custom logic implementation. \n\nPlease also see my PR: [https://github.com/vuejs/vitepress/pull/4630](https://github.com/vuejs/vitepress/pull/4630).\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.",[],4637,"Sidenav Components / Skip title update","2025-03-20T12:17:14Z","https://github.com/vuejs/vitepress/issues/4637",0.7132016,{"description":2903,"labels":2904,"number":2906,"owner":2869,"repository":2870,"state":2871,"title":2907,"updated_at":2908,"url":2909,"score":2910},"### Is your feature request related to a problem? Please describe.\n\nMy CMS stores markdown values in frontmatter data. For example, an intro section `intro` with a markdown string value. Currently, trying to access it in the page with `{{ $frontmatter.intro }}` just renders it as a string (a direct result of the markdown -> Vue -> HTML pipeline). What is the recommended way to call the markdown parser on it?\n\n### Describe the solution you'd like\n\nIt would be nice to see this exposed somehow (getting the built-in markdown-it instance, for example).\n\n### Describe alternatives you've considered\n\nI could install markdown-it separately and use it that way?\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.",[2905],{"name":2866,"color":2867},2410,"Expose the built-in markdown parser to render markdown-valued variables with","2024-02-02T09:23:30Z","https://github.com/vuejs/vitepress/issues/2410",0.72612095,{"description":2912,"labels":2913,"number":2914,"owner":2869,"repository":2870,"state":2915,"title":2916,"updated_at":2917,"url":2918,"score":2919},"### Is your feature request related to a problem? Please describe.\n\n1.希望code代码块在切换暗黑模式下,没有任何色差变化。\r\n而整个页面都发生了变化,就连自定义容器都发生了变化,唯独代码块没有任何变化。\r\nvue官方文档中,切换时,背景颜色发生变化了。\r\n2.切换模式下,背景颜色变化过快\n\n### Describe the solution you'd like\n\n1.加上颜色差的变化,因为整个页面的color颜色都变化 就code代码块未发生变化,最好字体 color 颜色也加上个色差变化\r\n2.加入下淡入淡出的动画效果,点击切换过快的颜色变化,眼睛有极大伤害\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.",[],2763,"closed","vitepress在暗黑模式中code代码块希望也加入暗黑模式","2023-08-17T00:04:10Z","https://github.com/vuejs/vitepress/issues/2763",0.6829003,{"description":2921,"labels":2922,"number":2926,"owner":2869,"repository":2870,"state":2915,"title":2927,"updated_at":2928,"url":2929,"score":2930},"I am looking into porting the using vue in Markdown from vuepress: \r\nhttps://vuepress.vuejs.org/guide/using-vue.html\r\n\r\nIf I understand correctly, vitepress doesn't want to auto register components by convention as Vuepress does. Is this the case? I actually liked this feature, but I understand that vitepress wants to keep the moving parts as small as possible.\r\n\r\nWhat is the recommended way to register the components? I see that in vue-router-next docs they are registered globally inside `enhanceApp`: https://github.com/vuejs/vue-router-next/search?q=HomeSponsors.\r\nSame as with this comment: https://github.com/vuejs/vitepress/issues/92#issuecomment-724645482\r\n\r\nShould we document this way in the docs?\r\n\r\nSome thoughts about this. It would be great that users that want to use the default theme as is, do not need to learn straight away about enhanceApp to be able to use a vue component in their markdown.\r\n\r\nIf auto registering by convention in a folder like `.vitepress/components` is not an option, could we import them directly in the markdown?\r\n\r\n```markdown\r\n# Docs\r\n\r\nThis is a .md using a custom component\r\n\r\n\u003CCustomComponent />\r\n\r\n## More docs\r\n\r\n...\r\n\r\n\u003Cscript setup>\r\n import CustomComponent from '../components/CustomComponent.vue'\r\n\u003C/script>\r\n```\r\n\r\nScript & style hoisting is working in vitepress: https://vuepress.vuejs.org/guide/using-vue.html#script-style-hoisting, but I tried this example to import a Component and it is not at this point.\r\n",[2923],{"name":2924,"color":2925},"docs","0075ca",157,"Recommended way to use Custom Vue components in .md","2023-01-21T16:04:10Z","https://github.com/vuejs/vitepress/issues/157",0.68673086,{"description":2932,"labels":2933,"number":2937,"owner":2869,"repository":2870,"state":2915,"title":2938,"updated_at":2939,"url":2940,"score":2941},"### 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.",[2934],{"name":2935,"color":2936},"bug: pending triage","e99695",3485,"Using vue to report errors in markdown","2024-01-29T00:04:28Z","https://github.com/vuejs/vitepress/issues/3485",0.7065455,{"description":2943,"labels":2944,"number":2945,"owner":2869,"repository":2870,"state":2915,"title":2946,"updated_at":2947,"url":2948,"score":2949},"### Is your feature request related to a problem? Please describe.\r\n\r\n许多第三方库会在导入时的顶层代码中访问 `window` 或者 `document`\r\n我不可能在第三库的源码中加上条件判断,这是不切实际的。\r\n\r\n假设有一个Vue插件模块名字就叫 \"a-vue-plugin\",并且假设它提供了大量有用的Vue组件或者实用功能。\r\n```typescript\r\nwindow.ABC = 123 // 这个模块在代码顶层就访问里 window\r\n\r\nconst plugin = {\r\n // ...\r\n}\r\n\r\nexport default plugin\r\n```\r\n\r\ndocs/.vitepress/theme/index.ts\r\n```typescript\r\n// ...\r\nimport { plugin } from 'a-vue-plugin''\r\n\r\nexport default define\u003CTheme>({\r\n NotFound,\r\n Layout: VPApp,\r\n enhanceApp: ({ app }) => {\r\n // 这样写显然是无济于事的,因为在执行 import { plugin } from 'a-vue-plugin' 时就已经访问到 window 了 \r\n if (!import.meta.env.SSR) {\r\n app.use(plugin) // 这里需要使用这个插件\r\n }\r\n },\r\n})\r\n```\r\n最终抛出错误\r\n```\r\n⠋ rendering pages...ReferenceError: window is not defined\r\n```\r\n\r\n### Describe the solution you'd like\r\n\r\n目前缺少完全合理的解决方案,请求官方针对此问题提供标准的解决方案或者规避方案。\r\n\r\n### Describe alternatives you've considered\r\n\r\n这是一个可能的解决方案,但需要 enhanceApp 支持异步才行。\r\n```typescript\r\nexport default define\u003CTheme>({\r\n NotFound,\r\n Layout: VPApp,\r\n enhanceApp: async ({ app }) => {\r\n if (!import.meta.env.SSR) {\r\n const plugin = (await import('a-vue-plugin')).default\r\n app.use(plugin)\r\n }\r\n },\r\n})\r\n```\r\n\r\n### Additional context\r\n\r\n类似的问题 [#](https://github.com/vuejs/vitepress/issues/1727#issue-1507239476)\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.",[],1884,"如何针对静态导入跳过SSR?","2023-03-23T00:04:27Z","https://github.com/vuejs/vitepress/issues/1884",0.7084198,{"description":2951,"labels":2952,"number":2953,"owner":2869,"repository":2870,"state":2915,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### 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.70899093,["Reactive",2959],{},["Set"],["ShallowReactive",2962],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fCPnjppSsXfUJnEnCrAeHfcRCAmcRt_Sc1xdYeJLTeC0":-1},"/vuejs/vitepress/3247"]