\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.",[2879],{"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.7171113,{"description":2886,"labels":2887,"number":2888,"owner":2869,"repository":2870,"state":2871,"title":2889,"updated_at":2890,"url":2891,"score":2892},"### 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.7234722,{"description":2894,"labels":2895,"number":2896,"owner":2869,"repository":2870,"state":2897,"title":2898,"updated_at":2899,"url":2900,"score":2901},"**Is your feature request related to a problem? Please describe.**\r\nRequire functionality to import code snippet with region as in [VuePress feature](https://vuepress.vuejs.org/guide/markdown.html#import-code-snippets).\r\n\r\n**Describe the solution you'd like**\r\nAdapt the same solution as in VuePress feature here.",[],237,"closed","Import code snippet with region","2023-01-21T16:22:26Z","https://github.com/vuejs/vitepress/issues/237",0.672639,{"description":2903,"labels":2904,"number":2908,"owner":2869,"repository":2870,"state":2897,"title":2909,"updated_at":2910,"url":2911,"score":2912},"### Discussed in https://github.com/vuejs/vitepress/discussions/527\r\n\r\n\u003Cdiv type='discussions-op-text'>\r\n\r\n\u003Csup>Originally posted by **WebMechanic** February 11, 2022\u003C/sup>\r\nHello,\r\n\r\nI have a fresh install of VitePress to document our new Style Guide and wanted to use the [Import Code Snippets](https://vitepress.vuejs.org/guide/markdown.html#import-code-snippets) feature for .js, .css and .html fragments, but the file(s) are not included. I tried all sorts of pathnames with/without the `base`, relative, absolute, all to no avail.\r\nEverything else works like a charme.\r\n\r\nThe project is a simple Vite Vue project. I then installed VitePress with yarn. \r\nIt resides in `src/_docs/.vitepress`.\r\n\r\nHere's the config file\r\n```js\r\nimport {defineConfig} from 'vitepress'\r\nexport default defineConfig({\r\n base: '/src/_docs/',\r\n title: \"The Style Guide\",\r\n markdown: {\r\n lineNumbers: false,\r\n toc: {includeLevel: [1, 2]},\r\n }\r\n}\r\n```\r\n\u003C/div>\r\n\r\nIt's not clear to me, if this requires some special care for Prism. Configuration seems very different fro what I can find on Lea Verou's site.\r\n",[2905],{"name":2906,"color":2907},"invalid","ffffff",530,"\"Import Code Snippets\" not working","2023-01-21T16:04:03Z","https://github.com/vuejs/vitepress/issues/530",0.6771259,{"description":2914,"labels":2915,"number":2916,"owner":2869,"repository":2870,"state":2897,"title":2917,"updated_at":2918,"url":2919,"score":2920},"### Is your feature request related to a problem? Please describe.\n\nIt will be great to add copy to clipboard button in code snippets for longer code snippets where dragging requires window scroll\n\n### Describe the solution you'd like\n\nAdd copy to clipboard button in default theme\n\n### Describe alternatives you've considered\n\nNone\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/coc)\n- [X] Read the [docs](https://vitepress.vuejs.org/).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/master/.github/contributing.md).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[],473,"Copy to clipboard button in code snippets","2023-01-21T14:35:55Z","https://github.com/vuejs/vitepress/issues/473",0.6806117,{"description":2922,"labels":2923,"number":2924,"owner":2869,"repository":2870,"state":2897,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### 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.6969692,{"description":2930,"labels":2931,"number":2932,"owner":2869,"repository":2870,"state":2897,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### 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.6994408,{"description":2938,"labels":2939,"number":2944,"owner":2869,"repository":2870,"state":2897,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Is your feature request related to a problem? Please describe.\n\nuse \r\n`\r\n\u003C\u003C\u003C @/../../ code_project/example/views/xxx/xx.vue\r\n`\r\nImport code snippet,Can customize @ path,\r\n\r\n\r\nthank you very much indeed\r\n\r\n\n\n### Describe the solution you'd like\n\n`\r\n\r\nimport { defineConfig } from 'vitepress';\r\nimport { fileURLToPath } from 'url';\r\nimport { dirname, resolve } from 'path';\r\nconst vitepressDir = dirname(fileURLToPath(import.meta.url));\r\nexport default defineConfig({\r\n vite: {\r\n resolve: {\r\n // Can it be defined here ??? \r\n alias: {\r\n '@codePath': resolve(vitepressDir, '../../../code_project/example/views/')\r\n }\r\n }\r\n }\r\n});\r\n`\r\nWhen in use\r\n`\r\n\u003C\u003C\u003C @codePath/xxx/xx.vue\r\n`\r\n\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.",[2940,2943],{"name":2941,"color":2942},"build","377ba8",{"name":2866,"color":2867},1698,"Allow customizing root for importing snippets","2023-08-12T00:04:20Z","https://github.com/vuejs/vitepress/issues/1698",0.705268,{"description":2950,"labels":2951,"number":2952,"owner":2869,"repository":2870,"state":2897,"title":2953,"updated_at":2954,"url":2955,"score":2956},"### 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.7058203,["Reactive",2958],{},["Set"],["ShallowReactive",2961],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$feWHQc5b6IwiTgBNnSxAnJQGtOjgStuxnpO4-ESDiKHI":-1},"/vuejs/vitepress/2129"]