\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.74646074,{"description":2885,"labels":2886,"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\n1. sometimes need use vue dynamic render highlight content like json list or some thing . if can provide component or function to do that, that will be great.\r\n2. tryed use the vue dynamic component it's not woking , can we use it ? how.\r\n1.有时候需要动态输出 markdown ,能不能加一个从vue 动态输出的功能 。 2. 动态组件用不了,怎么才能用vue 的动态组件\n\n### Describe the solution you'd like\n\n1. sometimes need use vue dynamic render highlight content like json list or some thing . if can provide component or function to do that, that will be great.\r\n2. tryed use the vue dynamic component it's not woking , can we use it ? how.\r\n1.有时候需要动态输出 markdown ,能不能加一个从vue 动态输出的功能 。 2. 动态组件用不了,怎么才能用vue 的动态组件\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.",[2887],{"name":2866,"color":2867},4253,"[Feature request] use vue render highlight section","2024-12-03T17:27:43Z","https://github.com/vuejs/vitepress/issues/4253",0.759876,{"description":2894,"labels":2895,"number":2899,"owner":2869,"repository":2870,"state":2900,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### Describe the bug\n\nThe button in the navigation for switching languages is not accessible for screen reader users.\r\n\r\n\r\n\r\nReviewing the HTML code reveals that property `aria-label` is not provided for the `button` element:\r\n\r\n```html\r\n\u003Cdiv class=\"VPFlyout VPNavBarTranslations translations\">\r\n \u003Cbutton type=\"button\" class=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n \u003Cspan class=\"text\">\r\n \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" class=\"option-icon\" >\r\n \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" class=\"text-icon\">\r\n \u003C/span>\r\n \u003C/button>\r\n \u003Cdiv class=\"menu\">\r\n \u003Cdiv class=\"VPMenu\">\r\n \u003Cdiv class=\"items\">\r\n \u003Cp class=\"title\">Deutsch\u003C/p>\r\n \u003Cdiv class=\"VPMenuLink\">\r\n \u003Ca class=\"VPLink link\" href=\"...\">English\u003C/a>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/div>\r\n```\r\n\r\nAs far as I can tell, the reason for the missing `aria-label` property seems to be the missing `label` property for component `VPFlyout.vue` in the `VPNavBarTranslations.vue` component.\r\n\r\n```html\r\n\u003C!-- src/client/theme-default/components/VPNavBarTranslations.vue -->\r\n\u003Ctemplate>\r\n \u003CVPFlyout\r\n v-if=\"localeLinks.length && currentLang.label\"\r\n class=\"VPNavBarTranslations\"\r\n :icon=\"VPIconLanguages\"\r\n >\r\n \u003Cdiv class=\"items\">\r\n \u003Cp class=\"title\">{{ currentLang.label }}\u003C/p>\r\n\r\n \u003Ctemplate v-for=\"locale in localeLinks\" :key=\"locale.link\">\r\n \u003CVPMenuLink :item=\"locale\" />\r\n \u003C/template>\r\n \u003C/div>\r\n \u003C/VPFlyout>\r\n\u003C/template>\r\n```\r\n\r\nI'm planning to provide a PR for this issue, if you agree. But I might need some guidance in how to provide the changes properly.\r\n\r\nIt seems like setting property `label` for component `VPFlyout` should resolve the issue. However, this value should be configurable for different locales IMO.\r\n\n\n### Reproduction\n\nConfigure vitepress for 2 locales at least to enable the \"Switch Language\" button in the navbar. Using a screen reader, the button is not announced properly (e.g. \"popup button collapse\").\n\n### Expected behavior\n\nThe `aria-label` property of the `button` element of `VPFlyout` in `VPNavBarTranslations` should be set.\r\n\r\n```html\r\n\u003C!-- src/client/theme-default/components/VPNavBarTranslations.vue -->\r\n\u003Ctemplate>\r\n \u003CVPFlyout\r\n v-if=\"localeLinks.length && currentLang.label\"\r\n class=\"VPNavBarTranslations\"\r\n :icon=\"VPIconLanguages\"\r\n :label=\"Switch Language\"\r\n >\r\n \u003Cdiv class=\"items\">\r\n \u003Cp class=\"title\">{{ currentLang.label }}\u003C/p>\r\n\r\n \u003Ctemplate v-for=\"locale in localeLinks\" :key=\"locale.link\">\r\n \u003CVPMenuLink :item=\"locale\" />\r\n \u003C/template>\r\n \u003C/div>\r\n \u003C/VPFlyout>\r\n\u003C/template>\r\n```\r\n\r\nor\r\n\r\n```html\r\n\u003C!-- src/client/theme-default/components/VPNavBarTranslations.vue -->\r\n\u003Ctemplate>\r\n \u003CVPFlyout\r\n v-if=\"localeLinks.length && currentLang.label\"\r\n class=\"VPNavBarTranslations\"\r\n :icon=\"VPIconLanguages\"\r\n :label=\"currentLang.languageButtonAriaLabel\"\r\n >\r\n \u003Cdiv class=\"items\">\r\n \u003Cp class=\"title\">{{ currentLang.label }}\u003C/p>\r\n\r\n \u003Ctemplate v-for=\"locale in localeLinks\" :key=\"locale.link\">\r\n \u003CVPMenuLink :item=\"locale\" />\r\n \u003C/template>\r\n \u003C/div>\r\n \u003C/VPFlyout>\r\n\u003C/template>\r\n```\r\n\r\nRelevant HTML code should look like this:\r\n\r\n```html\r\n\u003Cdiv class=\"VPFlyout VPNavBarTranslations translations\">\r\n \u003Cbutton type=\"button\" class=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\" aria-label=\"Switch Language\">\r\n \u003Cspan class=\"text\">\r\n \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" class=\"option-icon\" >\r\n \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" focusable=\"false\" class=\"text-icon\">\r\n \u003C/span>\r\n \u003C/button>\r\n \u003Cdiv class=\"menu\">\r\n \u003Cdiv class=\"VPMenu\">\r\n \u003Cdiv class=\"items\">\r\n \u003Cp class=\"title\">Deutsch\u003C/p>\r\n \u003Cdiv class=\"VPMenuLink\">\r\n \u003Ca class=\"VPLink link\" href=\"...\">English\u003C/a>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/div>\r\n```\n\n### System Info\n\n```shell\nSystem:\r\n OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)\r\n CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1505M v5 @ 2.80GHz\r\n Memory: 22.58 GB / 31.13 GB\r\n Container: Yes\r\n Shell: 5.0.17 - /bin/bash\r\n Binaries:\r\n Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node\r\n Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.0/bin/yarn\r\n npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm\r\n Browsers:\r\n Chrome: 110.0.5481.177\r\n Chromium: 110.0.5481.177\r\n Firefox: 110.0.1\n```\n\n\n### Additional context\n\nFollowing website explains the accessibility issue and possible solution in detail: https://dequeuniversity.com/rules/axe/4.4/button-name\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.",[2896],{"name":2897,"color":2898},"theme","0754FB",2021,"closed","'Switch Language' Button does not have an accessible name","2023-03-16T00:04:26Z","https://github.com/vuejs/vitepress/issues/2021",0.732188,{"description":2906,"labels":2907,"number":2908,"owner":2869,"repository":2870,"state":2900,"title":2909,"updated_at":2910,"url":2911,"score":2912},"### 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.73649824,{"description":2914,"labels":2915,"number":2919,"owner":2869,"repository":2870,"state":2900,"title":2920,"updated_at":2921,"url":2922,"score":2923},"### Describe the bug\n\nApart from the `Illegal tag name. Use '<' to print '\u003C'.vue(12)` error appearing when the snippet injection is used, after the use on a snippet injection the use of boolean attributes will inject then the attributes without value as empty strings instead of `true`.\r\n\r\n\n\n### Reproduction\n\nIn the `index.md` file with the content: \r\n\r\n```md\r\n\r\n\u003C\u003C\u003C src/index.ts\r\n\r\n...\r\n\r\n\u003CAppButton disabled>My button\u003C/AppButton>\r\n\r\n```\r\n\r\nThen `AppButton` will receive `''` as the property `disabled` value.\n\n### Expected behavior\n\nShould be setting the property `disabled` to `true` inside `AppButton`.\n\n### System Info\n\n```shell\nDo not apply.\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.",[2916],{"name":2917,"color":2918},"need more info","bdbefc",891,"No boolean attributtes after code snippet","2023-01-21T14:32:41Z","https://github.com/vuejs/vitepress/issues/891",0.7388062,{"description":2925,"labels":2926,"number":2927,"owner":2869,"repository":2870,"state":2900,"title":2928,"updated_at":2929,"url":2930,"score":2931},"I have a requirement should append post meta tag and custom H1 tag into vp-doc container, and I used BOM to manipulate this, like below:\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv ref=\"$h1Custom\">\r\n \u003Ch1 :id=\"page.title\" tabindex=\"-1\">\r\n {{ page.title }}\r\n \u003C/h1>\r\n \u003CMetadata :categories=\"frontmatter.categories\" :tags=\"frontmatter.tags\" :published-at=\"frontmatter.date\" />\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\nimport { useData } from 'vitepress';\r\nimport Metadata from './HYPostMetadata.vue'\r\nimport { nextTick, onMounted, ref, watch } from 'vue';\r\nconst $h1Custom = ref()\r\nconst { page, frontmatter } = useData()\r\n\r\nwatch(page, (value, oldValue) => {\r\n nextTick(() => {\r\n processH1Element()\r\n })\r\n})\r\n\r\nonMounted(() => {\r\n processH1Element()\r\n})\r\n\r\nfunction processH1Element() {\r\n const docDomContainer = window.document.querySelector('#VPContent')\r\n if (!docDomContainer) return\r\n const vpDoc = docDomContainer.querySelector('main .vp-doc div')\r\n vpDoc?.insertAdjacentElement('afterbegin', $h1Custom.value)\r\n}\r\n\r\n\u003C/script>\r\n```\r\nbut the h1 tag not add anchor because this not render by VitePress default process, how can I inject my template into the process? or which solution should I use ? I search [Build Hooks](https://vitepress.dev/reference/site-config#build-hooks), but seems not meet my need. ",[],3084,"[Query]Which hooks can I use to modifiy HTML or Vue before render process","2023-10-21T00:05:51Z","https://github.com/vuejs/vitepress/issues/3084",0.74614984,{"description":2933,"labels":2934,"number":2938,"owner":2869,"repository":2870,"state":2900,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Is your feature request related to a problem? Please describe.\n\naccent color copied from vuepress doesn't work.\r\nfile under: .vuepress/styles/palette.styl\r\nand value: $accentColor = #215AE5\n\n### Describe the solution you'd like\n\nif it works, it is easier to migrate from vuepress\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.",[2935],{"name":2936,"color":2937},"question","5D5FAE",1208,"Accent color","2023-01-21T14:27:00Z","https://github.com/vuejs/vitepress/issues/1208",0.7463141,{"description":2944,"labels":2945,"number":2946,"owner":2869,"repository":2870,"state":2900,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### 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.7504021,{"description":2952,"labels":2953,"number":2954,"owner":2869,"repository":2870,"state":2900,"title":2955,"updated_at":2956,"url":2957,"score":2958},"### Is your feature request related to a problem? Please describe.\n\nH2, H3 headings currently written in vue cannot be shown in outline,\n\n### Describe the solution you'd like\n\nor can we get a useData add header provided\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.",[],3103,"Can you identify the H tag in the outline display using vue file in md?","2023-10-27T00:04:15Z","https://github.com/vuejs/vitepress/issues/3103",0.75107443,["Reactive",2960],{},["Set"],["ShallowReactive",2963],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f0tDvgfPrGM_B4oirYs6P578QxQvQg9Lp1QWGT-z6GiE":-1},"/vuejs/vitepress/3574"]