\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.66924995,{"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\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,"closed","Adding Custom Containers from the config.js file ","2023-01-21T14:26:51Z","https://github.com/vuejs/vitepress/issues/1246",0.67491096,{"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.68887323,{"description":3171,"labels":3172,"number":274,"owner":3146,"repository":3147,"state":3157,"title":3176,"updated_at":3177,"url":3178,"score":3179},"### Describe the bug\n\nIt's an fixed Engish title. \n\n### Reproduction\n\nN/A\n\n### Expected behavior\n\nAllow custom title or translation.\n\n### System Info\n\n```shell\nN/A\n```\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] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3173],{"name":3174,"color":3175},"bug: pending triage","e99695","[Default Theme] VPDocAsideOutline: Allow custom title for 'On this page'","2023-01-21T14:35:36Z","https://github.com/vuejs/vitepress/issues/719",0.69434303,{"description":3181,"labels":3182,"number":3183,"owner":3146,"repository":3147,"state":3157,"title":3184,"updated_at":3185,"url":3186,"score":3187},"### Is your feature request related to a problem? Please describe.\r\n\r\nWhen I used the VPfeature component, I only passed a title attribute value to it, but I opened the devtools and found that I got related warning information. I don't think this kind of warning message is very necessary for users.\r\n\r\n\r\n\r\n> \r\n\r\n### Describe the solution you'd like\r\n\r\nProvide a default value for non-required properties in the component\r\n\r\n### Describe alternatives you've considered\r\n\r\nI have completed the relevant feature locally, If you think this is a good suggestion, I am willing to submit the relevant PR\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] 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.",[],1936,"recommended to provide a default value for the Props property defined in VPfeature Component","2023-03-05T00:04:53Z","https://github.com/vuejs/vitepress/issues/1936",0.69980925,{"description":3189,"labels":3190,"number":3191,"owner":3146,"repository":3147,"state":3157,"title":3192,"updated_at":3193,"url":3194,"score":3195},"### 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,"vitepress在暗黑模式中code代码块希望也加入暗黑模式","2023-08-17T00:04:10Z","https://github.com/vuejs/vitepress/issues/2763",0.7002639,{"description":3197,"labels":3198,"number":3199,"owner":3146,"repository":3147,"state":3157,"title":3200,"updated_at":3201,"url":3202,"score":3203},"### Is your feature request related to a problem? Please describe.\n\n无\n\n### Describe the solution you'd like\n\n新的vue组件库是基于vue2.7写的,使用vitepress搭过自己的博客觉得很舒服,希望vitepress支持下vue2.7版本,这样整个生态就比较舒服\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.",[],1514,"vitepress可以支持vue2.7","2023-01-21T14:23:08Z","https://github.com/vuejs/vitepress/issues/1514",0.7019822,{"description":3205,"labels":3206,"number":3210,"owner":3146,"repository":3147,"state":3157,"title":3211,"updated_at":3212,"url":3213,"score":3214},"### Is your feature request related to a problem? Please describe.\r\n\r\nId like to not use a `|` in the browser title bar of my application, instead, any other string.\r\n\r\n### Describe the solution you'd like\r\n\r\nin config.js, at some place...\r\n\r\n```js\r\n{\r\n ...\r\n titleDelimiter: '·',\r\n ...\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\nI should think it would be able to take even an HTML entity like `·` and render that.\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.",[3207],{"name":3208,"color":3209},"theme","0754FB",1195,"Provide option to change title delimiter","2023-01-21T14:26:36Z","https://github.com/vuejs/vitepress/issues/1195",0.7095463,{"description":3216,"labels":3217,"number":3221,"owner":3146,"repository":3147,"state":3157,"title":3222,"updated_at":3223,"url":3224,"score":3225},"### Is your feature request related to a problem? Please describe.\r\n\r\n**Is your feature request related to a problem? Please describe.**\r\n\r\nCurrently, VitePress provides basic support for HTML elements like `\u003Cabbr>` and `\u003Cacronym>` for displaying abbreviations. However, these elements have limitations in terms of customization and responsiveness, especially when zoomed in. The default tooltip appearance can be less than ideal, with small font sizes and limited control over styling.\r\n\r\nIn the image below, you can see VitePress displayed on a 1920x1080 screen. Initially, the page did not cover the entire screen, so it was adjusted to fit within the viewable area. To eliminate the extra space on the left and right, I zoomed in on the page.\r\n\r\nUpon zooming, I noticed that the \u003Cabbr> tag displays its title, but the tooltip does not scale correctly with the browser zoom. This issue results in the tooltip appearing smaller and less readable compared to the rest of the content.\r\n\r\n\r\n\r\n\r\n### Describe the solution you'd like\r\n\r\nTo get rid of this problem and in meantime to provide Vitepress a good enhancement let's implement a tooltip feature.\r\n\r\nI propose adding a feature that allows for custom abbreviation tooltips. This feature would enable users to define tooltips with full control over their appearance and behavior, including font size, color, and positioning. It would involve creating a customizable component or directive that could be used within Markdown files to replace or enhance the default HTML `\u003Cabbr>` and `\u003Cacronym>` behavior.\r\n\r\nOr at least a tooltip provided by default theme and enlarges with page.\r\n\r\n\r\n### Describe alternatives you've considered\r\n\r\n- **Custom HTML/CSS**: Using inline CSS in Markdown files to create tooltips. While functional, this approach is less flexible and more cumbersome to manage.\r\n- **JavaScript Solutions**: Utilizing JavaScript libraries or custom scripts to create tooltips. This approach requires additional dependencies and complexity.\r\n- **Vue Components**: Implementing a custom Vue component for tooltips. This provides flexibility but might require additional configuration and setup.\r\n\r\n### Additional context\r\n\r\nThe ability to create custom tooltips with specific styles and behavior would greatly enhance the user experience and provide a more polished look, especially when dealing with content that needs to be responsive and visually consistent.\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.",[3218],{"name":3219,"color":3220},"stale","ededed",4164,"Custom Abbreviation Tooltip Feature","2025-09-08T08:25:16Z","https://github.com/vuejs/vitepress/issues/4164",0.709984,{"description":3227,"labels":3228,"number":3229,"owner":3146,"repository":3147,"state":3157,"title":3230,"updated_at":3231,"url":3232,"score":3233},"\u003C!--\r\nNOTE:\r\nVitePress is still WIP, and it is not compatible with VuePress.\r\nPlease do not open issue about default theme missing features or something doesn't work like VuePress.\r\n-->\r\n\r\n**Describe the bug**\r\nWhen using a custom theme, importing composables like `useRoute` from `\"vitepress\"` in the Layout component also imports the styles for the default theme.\r\n\r\n**To Reproduce**\r\n\r\n1. Follow the [Getting Started guide](https://vitepress.vuejs.org/guide/getting-started.html) to create a new site\r\n2. Create `docs/.vitepress/theme/Layout.vue` with the following contents:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CContent />\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n// import { useRoute } from \"vitepress\";\r\n// const route = useRoute();\r\n\u003C/script>\r\n```\r\n\r\n3. Create `docs/.vitepress/theme/index.js` with the following contents:\r\n\r\n```js\r\nimport Layout from \"./Layout.vue\";\r\n\r\nexport default {\r\n Layout,\r\n};\r\n```\r\n\r\n4. Run `yarn docs:dev` and open http://localhost:3000. Note the heading doesn't have any styles applied to it:\r\n\r\n\r\n\r\n5. Uncomment the lines in the `\u003Cscript setup>` section in `docs/.vitepress/theme/Layout.vue`. Note the heading now has the default styles applied to it, even though we only imported `useRoute`:\r\n\r\n\r\n\r\n**Expected behavior**\r\nThe heading should remain unstyled since we aren't explicitly importing any styles.\r\n\r\n**System Info**\r\n- vitepress version: v0.9.2\r\n- vite version: v1.0.0-rc.13\r\n- Node version: v12.20.0\r\n- OS version: macOS Catalina 10.15.7\r\n\r\n**Additional context**\r\nI had a quick look at the Vitepress code and it looks like the problem might be to do with this line: https://github.com/vuejs/vitepress/blob/309aa7a8d0e7ab08c1c9db258c74709a66b295cb/src/client/app/exports.ts#L29\r\n\r\nAdding the following to `docs/.vitepress/config.js`:\r\n\r\n```javascript\r\nmodule.exports = {\r\n alias: {\r\n \"/@default-theme/index\": \"/@theme/empty.js\",\r\n },\r\n};\r\n```\r\n\r\n...and creating an empty file `docs/.vitepress/theme/empty.js` prevents the default styles being applied.\r\n",[],182,"Importing default composables also imports default theme's styles","2023-01-21T16:23:59Z","https://github.com/vuejs/vitepress/issues/182",0.7124327,["Reactive",3235],{},["Set"],["ShallowReactive",3238],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fU7d1h-gLCn_V538oQhFPdpVYcFvge2p9wiUKCtmHtjk":-1},"/vuejs/vitepress/1947"]