\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.71527916,{"description":2877,"labels":2878,"number":2879,"owner":2869,"repository":2870,"state":2871,"title":2880,"updated_at":2881,"url":2882,"score":2883},"### 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.7206375,{"description":2885,"labels":2886,"number":2890,"owner":2869,"repository":2870,"state":2891,"title":2892,"updated_at":2893,"url":2894,"score":2895},"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",[2887],{"name":2888,"color":2889},"docs","0075ca",157,"closed","Recommended way to use Custom Vue components in .md","2023-01-21T16:04:10Z","https://github.com/vuejs/vitepress/issues/157",0.69693077,{"description":2897,"labels":2898,"number":2902,"owner":2869,"repository":2870,"state":2891,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### 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.",[2899],{"name":2900,"color":2901},"bug: pending triage","e99695",3409,"index.md","2024-01-13T00:04:51Z","https://github.com/vuejs/vitepress/issues/3409",0.70037675,{"description":2908,"labels":2909,"number":1222,"owner":2869,"repository":2870,"state":2891,"title":2913,"updated_at":2914,"url":2915,"score":2916},"Hello!\r\n\r\nDocumentation says \"...allowing the user to freely mix Vue components inside markdown content...\" but it doesn't work as VuePress.\r\n\r\nTo reproduce init project according to documentation.\r\nCreate `.vitepress/components/NewComponent.vue` with a `\u003Ctemplate>\u003Cp>Hello VitePress\u003C/p>\u003C/template>`\r\nTry to use `\u003CNewComponent />` inside index.md\r\n\r\nExpected to see rendered component on the page see nothing.\r\nConsole says \"Failed to resolve component: NewComponent\"\r\n\r\nWhat I'm doing wrong? ",[2910],{"name":2911,"color":2912},"question","5D5FAE","Cant figure out how to use components inside .md file","2023-01-21T16:24:22Z","https://github.com/vuejs/vitepress/issues/101",0.70398325,{"description":2918,"labels":2919,"number":2921,"owner":2869,"repository":2870,"state":2891,"title":2922,"updated_at":2923,"url":2924,"score":2925},"### Describe the bug\r\n\r\nI am trying to use vue inside the markup but it seems like I cannot use typescript\r\n\r\n### Reproduction\r\n\r\nIf I add the following line in my markup file I get the error:\r\n\r\n```md\r\n\u003Cscript setup lang=\"ts\">\r\n```\r\n\r\n\r\n### Expected behavior\r\n\r\nWould like to use typescript in the markdown if possible. \r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: Windows 10 10.0.22000\r\n CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz\r\n Memory: 7.01 GB / 15.85 GB\r\n Binaries:\r\n Node: 14.17.5 - C:\\Program Files\\nodejs\\node.EXE\r\n Yarn: 1.22.5 - C:\\Program Files (x86)\\Yarn\\bin\\yarn.CMD\r\n npm: 7.20.6 - ~\\AppData\\Roaming\\npm\\npm.CMD\r\n Browsers:\r\n Chrome: 99.0.4844.51\r\n Edge: Spartan (44.22000.120.0), Chromium (99.0.1150.30)\r\n Internet Explorer: 11.0.22000.120\r\n npmPackages:\r\n vitepress: ^0.22.3 => 0.22.3\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] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.vuejs.org).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2920],{"name":2900,"color":2901},575,"Internal server error: [@vue/compiler-sfc] \u003Cscript> and \u003Cscript setup> must have the same language type.","2023-01-21T16:04:31Z","https://github.com/vuejs/vitepress/issues/575",0.7087806,{"description":2927,"labels":2928,"number":2929,"owner":2869,"repository":2870,"state":2891,"title":2930,"updated_at":2931,"url":2932,"score":2933},"### Is your feature request related to a problem? Please describe.\r\n\r\nIssue 1: Is there a way or how to get the `md` instance (per-configured by VitePress) in Vue component\r\n- I know it might be impossible or being problematic because it's supposed to be run at build-time which is in Node.js, so I'm not expecting a yes answer here, but is there any better alternative way to do so?\r\n- Note due to some reason, I don't really want to write markdown straight away, instead I want to leverage the power of yaml format, and handle the transformation just once. (Since I don't want my team to ask me how to write certain md syntax with my custom component again and again, since `Vue in markdown` is not that straight forward for them). And defining API schemas by `yaml` makes more sense to me instead of writing markdown to document.\r\n\r\nIssue 2: I noticed that by my current implementation (see below), those data are not collected by `local (minisearch)` search. This might be because data collection is happening at build-time (not sure)? Is there any way to work around this?\r\n\r\n---\r\nMy use-case:\r\n\r\nImagine a custom layout here:\r\n```md\r\n---\r\nlayout: api # my custom layout\r\nrequests:\r\n - url: /getSecurityType\r\n method: post\r\n # ....\r\n\r\n - url: /getSecurityCategory\r\n method: post\r\n # ....\r\n---\r\n```\r\nFor example, I want to map the URL to `\u003Ch2>`, and also benefit from built-in VitePress features such as `aside`.\r\n\r\nBut I found out that normal h2 won't work, since `aside` is collecting only `h2` with children, which is the `#` link on the left by default. This makes sense, but it's a little bit hard for me to manually copy the dom.\r\n\r\nA comparison could be like:\r\nWhat I want:\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { useData } from 'vitepress';\r\nimport { md } from '???'; // This is what I want\r\nimport type { ApiFrontMatter } from '@theme/types/api';\r\nimport type { VitePressData } from 'vitepress';\r\nimport type { Ref } from 'vue';\r\n\r\nconst { frontmatter: fm } = useData() as VitePressData & { frontmatter: Ref\u003CApiFrontMatter> };\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"vp-doc\">\r\n \u003Ch1>{{ fm.setName }}\u003C/h1>\r\n\r\n \u003Ctemplate v-for=\"req in fm.requests\" :key=\"req.url\">\r\n \u003C!-- md instance imported from somewhere (that's what I want) -->\r\n {{ md.render(`## ${req.url}`) }}\r\n \u003C/template>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\nCurrently, I have to mimic it (although it works for styles and aside, but search data collection ignores them):\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { useData } from 'vitepress';\r\nimport type { ApiFrontMatter } from '@theme/types/api';\r\nimport type { VitePressData } from 'vitepress';\r\nimport type { Ref } from 'vue';\r\n\r\nconst { frontmatter: fm } = useData() as VitePressData & { frontmatter: Ref\u003CApiFrontMatter> };\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"vp-doc\">\r\n \u003Ch1>{{ fm.setName }}\u003C/h1>\r\n\r\n \u003Ctemplate v-for=\"req in fm.requests\" :key=\"req.url\">\r\n \u003Ch2 :id=\"req.url\">\r\n {{ req.url }}\r\n \u003Ca\r\n class=\"header-anchor\"\r\n :href=\"`#${req.url}`\"\r\n :aria-label=\"`Permalink to "${req.url}"`\"\r\n >\r\n ​\r\n \u003C/a>\r\n \u003C/h2>\r\n \u003C/template>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n### Describe alternatives you've considered\r\n\r\nThe worst case is I need to write a custom `markdown-it` plugin and wrap all those yaml into a custom block and do the transformation there... But honestly that's gonna be a huge pain...\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.",[],2605,"How to get the `md` instance (include all plugins defined) to parse my custom string in Vue component?","2023-08-15T00:04:17Z","https://github.com/vuejs/vitepress/issues/2605",0.70983094,{"description":2935,"labels":2936,"number":2940,"owner":2869,"repository":2870,"state":2891,"title":2941,"updated_at":2942,"url":2943,"score":2944},"### 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.",[2937],{"name":2938,"color":2939},"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.71660936,{"description":2946,"labels":2947,"number":2951,"owner":2869,"repository":2870,"state":2891,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### Vue version\n\n3.2.45\n\n### Link to minimal reproduction\n\nhttps://github.com/newstart0514/vueProblem\n\n### Steps to reproduce\n\nUse vitepress to set the file route normally. The file is routed to the md file (needs to be imported to the local). This error occurs when opening the route\n\n### What is expected?\n\nThe md file will be converted to html normally\n\n### What is actually happening?\n\nAn error occurred and rendering cannot be performed normally. The error message is: Unhandled error during execution of scheduler flush This is likely a Vue internals bug.\n\n### System Info\n\n```shell\nSystem:\r\n OS: Windows 10 10.0.22000\r\n CPU: (16) x64 AMD Ryzen 7 4800U with Radeon Graphics\r\n Memory: 4.01 GB / 15.37 GB\r\n Binaries:\r\n Node: 18.12.1 - D:\\nodejs\\node.EXE\r\n Yarn: 1.22.18 - ~\\AppData\\Roaming\\npm\\yarn.CMD\r\n npm: 8.19.2 - D:\\nodejs\\npm.CMD\r\n Browsers:\r\n Edge: Spartan (44.22000.120.0), Chromium (110.0.1587.63)\r\n Internet Explorer: 11.0.22000.120\r\n npmPackages:\r\n vue: ^3.2.45 => 3.2.45\n```\n\n\n### Any additional comments?\n\n_No response_",[2948],{"name":2949,"color":2950},"need more info","bdbefc",2046,"An error occurred when rendering a markdown file when using vitepress","2023-06-01T00:04:29Z","https://github.com/vuejs/vitepress/issues/2046",0.7166702,{"description":2957,"labels":2958,"number":2960,"owner":2869,"repository":2870,"state":2891,"title":2961,"updated_at":2962,"url":2963,"score":2964},"### Describe the bug\r\n\r\nHi, I am trying to import and use a custom Markdown renderer inside a component but it looks like the `createMarkdownRenderer` function is not exported.\r\n\r\n```\r\nUncaught SyntaxError: The requested module '/@fs/Users/xyz/.github/xyz/node_modules/vitepress/dist/client/index.js?v=61ac765b' does not provide an export named 'createMarkdownRenderer' (at EndpointExample.vue:2:10)\r\n```\r\n\r\nHowever, according to TypeScript types exported from VitePress, `createMarkdownRenderer` should be available for use.\r\n\r\n### Reproduction\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { createMarkdownRenderer } from \"vitepress\";\r\n\r\nconst props = defineProps\u003C{\r\n requests: { type: string; content: string; }[];\r\n response: string;\r\n}>();\r\n\r\n// `createMarkdownRenderer` is not exported from vitepress.\r\nconst md = await createMarkdownRenderer(\".\");\r\nconst response = md.render(props.response);\r\n\u003C/script>\r\n```\r\n\r\n### Expected behavior\r\n\r\nThe function `createMarkdownRenderer` should be exported as it is available from TypeScript types. If it should not, then remove the `createMarkdownRenderer` type export.\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: macOS 12.6\r\n CPU: (8) arm64 Apple M1 Pro\r\n Memory: 116.75 MB / 16.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node\r\n Yarn: 1.22.19 - ~/.yarn/bin/yarn\r\n npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm\r\n Browsers:\r\n Brave Browser: 108.1.46.144\r\n Chrome: 108.0.5359.124\r\n Firefox: 103.0.2\r\n Safari: 16.0\r\n```\r\n\r\n\r\n### Additional context\r\n\r\nPlease note that I am trying to create a custom `markdownRenderer` so that I can create a code render from my component props.\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] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2959],{"name":2900,"color":2901},1752,"The requested module does not provide an export named 'createMarkdownRenderer'","2023-01-21T14:16:58Z","https://github.com/vuejs/vitepress/issues/1752",0.71723825,["Reactive",2966],{},["Set"],["ShallowReactive",2969],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fFNiEKT_v9n0bcAaVdgYR3v2XCVHBbZSTDtJZMSaeSFQ":-1},"/vuejs/vitepress/657"]