\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.67493707,{"description":3154,"labels":3155,"number":3159,"owner":3146,"repository":3147,"state":3148,"title":3160,"updated_at":3161,"url":3162,"score":3163},"### Is your feature request related to a problem? Please describe.\r\n\r\nvitepress is currently not capable enough for developing component libraries. While it is fast, it lacks something. We may be able to incorporate support for component capabilities similar to `dumi` to help developers quickly develop Vue component libraries docs.\r\n\r\n```html\r\n\u003Cdemo src=\"../demo.vue\" title=\"Demo block\" desc=\"use demo\" />\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.",[3156],{"name":3157,"color":3158},"stale","ededed",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.6966708,{"description":3165,"labels":3166,"number":3167,"owner":3146,"repository":3147,"state":3148,"title":3168,"updated_at":3169,"url":3170,"score":3171},"### Is your feature request related to a problem? Please describe.\n\nVitePress currently outputs unobfuscated class names in the default theme via scoped styles (e.g. `.VPDocAside`). These predictable selectors are easy targets for aggressive adblock filters, which can unintentionally hide more than intended (for example, on [tsx.is](https://tsx.is), sponsor sections or even entire sidebars).\n\nAt the moment, there's no ergonomic way to customize or obfuscate these selectors at the VitePress level. While adblockers serve an important role, I believe VitePress should also empower developers with the option to defend against them if they choose. Providing this flexibility would be a unique value-add for VitePress, and can potentially be an underrated but impactful feature edge.\n\n### Describe the solution you'd like\n\nThe default theme currently uses Vue scoped styles. I recommend migrating it to CSS Modules instead.\n\nVue & Vite already has solid CSS Modules support, so the migration should be straightforward. Using the underlying Vite config, developers can customize class naming.\n\nThis approach gives developers more control without extra complexity, and also helps mitigate the issue of predictable class names being aggressively targeted (e.g. by adblock filters). Personally, I would configure a random hash on each build so that selectors differ on every deploy.\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\nThis would be a breaking change, since the underlying mechanism for CSS scoping would change fundamentally.\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.",[],4920,"Use CSS Modules in default VitePress theme for more flexible class scoping","2025-08-22T09:32:29Z","https://github.com/vuejs/vitepress/issues/4920",0.71348697,{"description":3173,"labels":3174,"number":3175,"owner":3146,"repository":3147,"state":3176,"title":3177,"updated_at":3178,"url":3179,"score":3180},"### 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,"closed","Markdown formatting in custom container titles","2023-01-21T14:34:10Z","https://github.com/vuejs/vitepress/issues/765",0.6353446,{"description":3182,"labels":3183,"number":3184,"owner":3146,"repository":3147,"state":3176,"title":3185,"updated_at":3186,"url":3187,"score":3188},"### Is your feature request related to a problem? Please describe.\n\nNo\n\n### Describe the solution you'd like\n\nThe custom container are a very useful feature and it can be configurable in the .vitepress/config.js file with color for \r\nname,border, border-dark, background, background-dark in the config file with these 5 options i think it will make a better for a better blog points.\n\n### Describe alternatives you've considered\n\nHaving the lack of customization for the custom container boxes. I am aware that you can create components to do the same things but the \"::: name :::\" syntax is better to view in markdown as well as more read able than having it wrapped inside a html tag.\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.",[],1246,"Adding Custom Containers from the config.js file ","2023-01-21T14:26:51Z","https://github.com/vuejs/vitepress/issues/1246",0.659217,{"description":3190,"labels":3191,"number":3195,"owner":3146,"repository":3147,"state":3176,"title":3196,"updated_at":3197,"url":3198,"score":3199},"### 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",[3192],{"name":3193,"color":3194},"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.68890285,{"description":3201,"labels":3202,"number":3203,"owner":3146,"repository":3147,"state":3176,"title":3204,"updated_at":3205,"url":3206,"score":3207},"- Add a new command: `vitepress init`\n - Users can invoke this after installing `vitepress` with `npx vitepress init`\n- Ask a few CLI questions:\n - Root of your markdown files (default: `cwd`)\n - Site title / description\n - Use the default theme / default theme + customization / complete custom theme?\n - Inject npm scripts? (should be based on root)\n- Scaffold the project in desired root\n - `.vitepress/config.js` with title, description, and a comment with link to app config docs\n - `example.md` with examples of built-in markdown features\n - If default theme:\n - `index.md` w/ example home page frontmatter\n - Example nav / sidebar config with links to `example.md` and VitePress docs\n - If default theme + customization: add `.vitepress/theme/index.js` and `.vitepress/theme/style.css` with theme slot and CSS var customization exmaples\n - If custom theme:\n - add `.vitepress/theme/index.s` + `.vitepress/theme/Layout.vue` for a simple custom theme example",[],1252,"Add initialization command","2023-03-10T00:04:39Z","https://github.com/vuejs/vitepress/issues/1252",0.6982834,{"description":3209,"labels":3210,"number":3211,"owner":3146,"repository":3147,"state":3176,"title":3212,"updated_at":3213,"url":3214,"score":3215},"### 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,"custom containers style option","2023-01-21T14:28:46Z","https://github.com/vuejs/vitepress/issues/1157",0.6986582,{"description":3217,"labels":3218,"number":3219,"owner":3146,"repository":3147,"state":3176,"title":3220,"updated_at":3221,"url":3222,"score":3223},"### Is your feature request related to a problem? Please describe.\n\n当我在文档里插入图片发布后,图片中有部分内容在页面上较为模糊。我试过markdown-it-custom-attrs插件,但是好像没有生效。\n\n### Describe the solution you'd like\n\n在vitepress中集成图片灯箱的功能,或者有什么办法可以集成相关组件(希望给一个示例)\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.",[],2674,"能否增加一个图片点击放大的功能。","2023-08-01T00:04:35Z","https://github.com/vuejs/vitepress/issues/2674",0.7023229,{"description":3225,"labels":3226,"number":3227,"owner":3146,"repository":3147,"state":3176,"title":3228,"updated_at":3229,"url":3230,"score":3231},"### Is your feature request related to a problem? Please describe.\r\n\r\nWe can import code snippets using `@` prefix as root, `@` prefix not available when using markdown file inclusion, this is is not working: `\u003C!--@include: @/partials/why.md-->`\r\n\r\n### Describe the solution you'd like\r\n\r\nUse the `@` prefix also when using mardown file inclusion\r\n\r\n### Describe alternatives you've considered\r\n\r\nNone.\r\n\r\n### Additional context\r\n\r\nI have a local PR, I will send it in a few minutes.\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.",[],2291,"inconsistent behavior importing markdown","2023-05-07T00:04:20Z","https://github.com/vuejs/vitepress/issues/2291",0.7051325,["Reactive",3233],{},["Set"],["ShallowReactive",3236],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f2rPJgE6MdzJmUYizhd3iDw5uRdilZl5WTq7HzZko8R4":-1},"/vuejs/vitepress/2473"]