\n\n---\n\n\u003Cdetails>\u003Csummary>\u003Ccode>:has()\u003C/code> CSS changes\u003C/summary>\n\u003Cp>\n\n```diff\n .custom-block {\n- padding: 16px 16px 8px;\n+ padding: 8px 16px;\n }\n\n+ .custom-block:has(.custom-block-title) {\n+ padding-top: 16px;\n+ }\n```\n\n\u003C/p>\n\u003C/details> \n\n\n### Describe alternatives you've considered\n\nYou can create custom containers yourself, like this:\n\n```md\n\u003Cdiv class=\"custom-block tip\" style=\"padding-top: 8px\">\n\n💡 This is a helpful tip.\n\n\u003C/div>\n```\n\nHowever, this is not ergonomical, nor is it future-proof (What if those class names change? What if the padding changes?).\n\n### Additional context\n\nThe use case for this already exists within Vitepress docs:\n\nhttps://github.com/vuejs/vitepress/blob/dd293484669c59a471052108995be3b8f898838d/docs/en/guide/what-is-vitepress.md?plain=1#L5-L9\n\n\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.",[],4928,"vuejs","vitepress","open","Titleless custom containers","2025-08-31T16:22:27Z","https://github.com/vuejs/vitepress/issues/4928",0.67773247,{"description":3154,"labels":3155,"number":3156,"owner":3146,"repository":3147,"state":3157,"title":3158,"updated_at":3159,"url":3160,"score":3161},"### Is your feature request related to a problem? Please describe.\n\nNoticing that there is a distinct difference from vue press custom containers to that of vite's\r\n\r\n## vue press\r\n\u003Cimg width=\"784\" alt=\"Screenshot 2022-08-11 at 3 38 20 PM\" src=\"https://user-images.githubusercontent.com/1858427/184088154-0c171530-b416-4fab-96a9-4f587e8220dc.png\">\r\n\r\n\r\n## vite press\r\n\u003Cimg width=\"734\" alt=\"Screenshot 2022-08-11 at 3 38 30 PM\" src=\"https://user-images.githubusercontent.com/1858427/184088178-03b9564b-e9b9-4ba6-a197-f64c3249a923.png\">\r\n\r\n\n\n### Describe the solution you'd like\n\nI know that the color can be overridden in https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css\r\n\r\nbut, the for the style difference for this line \r\n\u003Cimg width=\"76\" alt=\"Screenshot 2022-08-11 at 3 53 52 PM\" src=\"https://user-images.githubusercontent.com/1858427/184088784-33fdfeaf-115e-47bc-b43d-be355ef67f7d.png\">\r\n\r\nis it possible to expose an option to be configured, like\r\n```\r\nthemeConfig : {\r\n logo: xxx,\r\n customContainer: {\r\n withLeftBorder: true,\r\n cornerRadius: \"6px\"\r\n }\r\n}\r\n```\r\n\r\nEffect:\r\n\u003Cimg width=\"223\" alt=\"Screenshot 2022-08-11 at 4 03 14 PM\" src=\"https://user-images.githubusercontent.com/1858427/184090149-ca7ddd87-d574-4a4a-8704-d594588f7f3c.png\">\r\n\r\n\n\n### Describe alternatives you've considered\n\nAlternatively,\r\nthese two properties can be exposed in css variables: https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css\r\n\r\nsomething like: \r\n```\r\n//add corner radius\r\n--vp-custom-block-border-radius: 6px;\r\n//remove border, add lable left border\r\n--vp-custom-block-info-border: none;\r\n--vp-custom-block-info-left-border: var(--vp-c-green-darker);\r\n--vp-custom-block-info-left-border-width: 5px \r\n\r\n```\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.",[],1157,"closed","custom containers style option","2023-01-21T14:28:46Z","https://github.com/vuejs/vitepress/issues/1157",0.643032,{"description":3163,"labels":3164,"number":3165,"owner":3146,"repository":3147,"state":3157,"title":3166,"updated_at":3167,"url":3168,"score":3169},"### Is your feature request related to a problem? Please describe.\n\nN/A\n\n### Describe the solution you'd like\n\nAllow custom titles of containers to be manipulated with Markdown, such as **bold**, _italics_, or hyperlinks.\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.",[],765,"Markdown formatting in custom container titles","2023-01-21T14:34:10Z","https://github.com/vuejs/vitepress/issues/765",0.6739717,{"description":3171,"labels":3172,"number":3176,"owner":3146,"repository":3147,"state":3157,"title":3177,"updated_at":3178,"url":3179,"score":3180},"### Is your feature request related to a problem? Please describe.\r\n\r\nWhen I write documentation, I sometimes want to have some sort of introductory paragraph to set some context for the readers. These kinds of introductory paragraphs are often visually emphasized to catch attention and get even more impactful. Usually, the emphasis relies on styling (e.g. bigger font size, bolder font weights, etc).\r\n\r\nI really think it would be convenient for many users to be able to specify introductions in a straight-forward and _markdownish_ way, so that such content gets emphasized through styling while preserving other markdown rules and features .\r\n\r\n### Describe the solution you'd like\r\n\r\nTo address this need, we basically want to take a whole identified block and apply some styles to make it stand out. It turns out this kind of feature already exists in Vitepress: [custom containers](https://vitepress.dev/guide/markdown#custom-containers). These perfectly match our needs because:\r\n- they can be clearly identified because the syntax really pops out\r\n- their content still benefit from markdown syntax\r\n- they contextually provide their content a special, highlighted role\r\n\r\nMy belief is that it makes sense to also provide a `intro` custom container because those share a common philosophy. However, there is a slight difference : unlike other custom containers, I feel like it does not make any sense for `intro`s to include default and custom titles because well… they're introductions).\r\n\r\n### Describe alternatives you've considered\r\n\r\nI used to work this around by explicitly wrapping my introductory paragraph with a `\u003Cp class=\"intro\">\u003C/p>` block, and defining some CSS on the `.intro` selector, since it is supported. This works just fine, but being in a explicit HTML block prevents me from benefiting from other markdown features. For example, this would not work as expected:\r\n\r\n```md\r\n\u003Cp class=\"intro\">\r\n [click me](https://github.com)\r\n\u003C/p>\r\n```` \r\n\r\n### Additional context\r\n\r\nI've came up with the following draft PR: #2474. It's marked as draft because [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md) state that we \"should open a suggestion issue first \", but could not resist to give it a try.\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.",[3173],{"name":3174,"color":3175},"theme","0754FB",2473,"Introduction custom container","2023-07-29T00:04:10Z","https://github.com/vuejs/vitepress/issues/2473",0.67766166,{"description":3182,"labels":3183,"number":3187,"owner":3146,"repository":3147,"state":3157,"title":3188,"updated_at":3189,"url":3190,"score":3191},"### Is your feature request related to a problem? Please describe.\n\nIn VuePress it was possible to set default titles for TIP, INFO, WARNING, DANGER, DETAILS in config but in VitePress it doesn't work anymore.\n\n### Describe the solution you'd like\n\nAdd something like this in a config:\r\n```js\r\nthemeConfig: {\r\n\tcontainer: {\r\n\t\ttip: 'Tip',\r\n\t\tinfo: 'Info',\r\n\t\twarning: \"Warning\",\r\n\t\tdanger: 'Danger',\r\n\t\tdetails: \"Details\"\r\n\t},\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.",[3184],{"name":3185,"color":3186},"stale","ededed",1947,"Add i18n support for default Custom Container titles","2023-08-11T00:04:11Z","https://github.com/vuejs/vitepress/issues/1947",0.6789637,{"description":3193,"labels":3194,"number":3195,"owner":3146,"repository":3147,"state":3157,"title":3196,"updated_at":3197,"url":3198,"score":3199},"### 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.6813851,{"description":3201,"labels":3202,"number":3203,"owner":3146,"repository":3147,"state":3157,"title":3204,"updated_at":3205,"url":3206,"score":3207},"### Is your feature request related to a problem? Please describe.\r\n\r\nMake configuration easier.\r\n\r\n### Describe the solution you'd like\r\n\r\nSame as [vite](https://vitejs.dev/config/#config-intellisense) :\r\n\r\n```ts\r\nimport { defineConfig } from 'vitepress'\r\n\r\nexport default defineConfig({\r\n lang: 'en-US',\r\n // ...\r\n}) \r\n``` \r\n\r\nBut we need to improve the support for theme config:\r\n\r\nBy default, `defineConfig` helper leverages the theme config type from default theme:\r\n\r\n```js\r\nimport { defineConfig } from 'vitepress'\r\n\r\nexport default defineConfig({\r\n themeConfig: {\r\n // Type is `DefaultTheme.Config` \r\n }\r\n})\r\n```\r\n\r\nIf you use a custom theme, you'll be able to pass the generics type for your custom theme, and you need overload it with the second parameter of `defineConfig` helper:\r\n\r\n```js\r\nimport { defineConfig } from 'vitepress'\r\nimport { ThemeConfig } from 'your-theme'\r\n\r\nexport default defineConfig\u003CThemeConfig>({\r\n themeConfig: {\r\n // Type is `ThemeConfig` \r\n }\r\n}, true); // declare `usingCustomTheme` and discard usage of the default theme.\r\n```\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/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.",[],464,"[Feature Request] Improve TypeScript support for config file.","2023-01-21T16:20:21Z","https://github.com/vuejs/vitepress/issues/464",0.68141365,{"description":3209,"labels":3210,"number":3211,"owner":3146,"repository":3147,"state":3157,"title":3212,"updated_at":3213,"url":3214,"score":3215},"### Is your feature request related to a problem? Please describe.\n\n## Adding Static Resources config\r\nWhen I use **vitepress** with external css files e.g. `element-plus.css`. I found that the only way to import the css file is via JavaScript. You can't actually add it in the rendered template `head` tag. So I wonder is it possible to expose a config field for importing external resources via `CDN`\r\n\r\n## Benefits\r\n\r\nWhen using external resources this way we could potentially benefit from using CDN.\n\n### Describe the solution you'd like\n\n### Exposing a field named `externals` or `resources` with type:\r\n\r\n```typescript\r\ntype Resource = {\r\n type: 'script' | 'link',\r\n target: 'url_to_resource',\r\n async: boolean // or defer?\r\n}\r\n\r\ntype Resources = Resource[]\r\n```\r\n\r\n### When rendering\r\n\r\nAdd co-responding HTML tag into the `head` tag for external links.\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/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.",[],375,"[Feature Request] Adding config for external resources","2023-01-21T16:22:09Z","https://github.com/vuejs/vitepress/issues/375",0.6826299,{"description":3217,"labels":3218,"number":3222,"owner":3146,"repository":3147,"state":3157,"title":3223,"updated_at":3224,"url":3225,"score":3226},"### Describe the bug\n\n\nThe current implementation of the collapsible **sidebar** navigation uses div elements and custom JavaScript to function as an accordion. This non-semantic approach creates significant accessibility issues.\n\nAssistive technologies, like screen readers, cannot properly interpret the role or state (expanded/collapsed) of these components. This results in a poor user experience for individuals who rely on such technology.\n\nI propose replacing the current div-based implementation with the native HTML \u003Cdetails> and \u003Csummary> elements. This would:\n\nProvide full accessibility out-of-the-box for screen reader and keyboard-only users.\n\nReduce custom JavaScript and engineering complexity by leveraging native browser behavior.\n\nAlign the component with modern web standards and semantic best practices.\n\n\n\n### Reproduction\n\nNavigate to any page in the VitePress documentation that uses a collapsible container, such as the [Vitepress Docs](https://vitepress.dev/guide/what-is-vitepress).\n\n\nAttempt to navigate the **sidebar** with a screen reader (e.g., VoiceOver, NVDA, JAWS). The screen reader fails to announce it as a collapsible element or communicate its state.\n\n### Expected behavior\n\nFor sidebar to look and function exactly as it does now but with better accessibility.\n\n\n### System Info\n\n```Text\nJAWS, NVDA, VOICEOVER\n```\n",[3219],{"name":3220,"color":3221},"need more info","bdbefc",4846,"Bug: Custom Container/Accordion component is not accessible and should use native \u003Cdetails>/\u003Csummary> elements","2025-07-17T06:30:42Z","https://github.com/vuejs/vitepress/issues/4846",0.6871135,{"description":3228,"labels":3229,"number":3230,"owner":3146,"repository":3147,"state":3157,"title":3231,"updated_at":3232,"url":3233,"score":3234},"**Is your feature request related to a problem? Please describe.**\r\n\r\nin VuePress we can pass `configureWebpack` to the vuepress config to modify webpack behaviour. useful to add module resolve and aliases, plugins etc.\r\n\r\nhttps://vuepress.vuejs.org/config/#configurewebpack\r\n\r\n**Describe the solution you'd like**\r\n\r\nAllow to do the same (or similar) with vitepress\r\n\r\n**Describe alternatives you've considered**\r\n\r\nanything that'll result in the same behavior\r\n\r\n",[],179,"configureWebpack in vitepress config","2023-01-21T16:24:09Z","https://github.com/vuejs/vitepress/issues/179",0.69198275,["Reactive",3236],{},["Set"],["ShallowReactive",3239],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f7fqUZoDZjjcj702iMHfaWGF59QvcbwR99hlg3rNjEOE":-1},"/vuejs/vitepress/1246"]