\r\n```\r\nI think this is pretty reasonable to have.\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.",[],3068,"Use Iconify icons in inline markdown","2023-10-20T00:04:33Z","https://github.com/vuejs/vitepress/issues/3068",0.71975464,{"description":2895,"labels":2896,"number":2900,"owner":2868,"repository":2869,"state":2870,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### Is your feature request related to a problem? Please describe.\r\n\r\nWhen I use Element-Plus in VitePress, the partial style of the component is modified. The reason is VitePress `src/client/theme-default/styles/layout.css` File reset all styles.\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n### Describe the solution you'd like\r\n\r\nI hope this code only takes effect in VitePress.\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.",[2897],{"name":2898,"color":2899},"duplicate","cfd3d7",434,"This is a suggestion","2023-01-21T16:04:15Z","https://github.com/vuejs/vitepress/issues/434",0.72192526,{"description":2906,"labels":2907,"number":2909,"owner":2868,"repository":2869,"state":2870,"title":2910,"updated_at":2911,"url":2912,"score":2913},"**Is your feature request related to a problem? Please describe.**\r\nDark mode is becoming ever more popular, with a number of benefits such as less strain on the eyes, and less battery consumption.\r\nPlus, it's cool.\r\n\r\nIt would be nice if VitePress would ship dark mode out of the box.\r\n\r\n**Describe the solution you'd like**\r\nIt seems to me that dark mode would be quite simple to implement due to the existing architecture of the default theme. Since CSS Variables are used and are all found in [vars.css](https://github.com/vuejs/vitepress/blob/master/src/client/theme-default/styles/vars.css), the most simple solution solution would likely to modify the value of the variables based on the user's preference.\r\n\r\nCurrently, this is what [vars.css](https://github.com/vuejs/vitepress/blob/master/src/client/theme-default/styles/vars.css) looks like:\r\n\r\n``` css\r\n:root {\r\n\r\n --c-white: #ffffff;\r\n --c-black: #000000;\r\n\r\n ...\r\n\r\n}\r\n```\r\n\r\nUsing `prefers-color-scheme`, we could do the following:\r\n\r\n``` css\r\n@media (prefers-color-scheme: light) {\r\n :root {\r\n\r\n --c-white: #ffffff;\r\n --c-black: #000000;\r\n\r\n ...\r\n\r\n }\r\n}\r\n@media (prefers-color-scheme: dark) {\r\n :root {\r\n\r\n --c-white: #000000;\r\n --c-black: #ffffff;\r\n\r\n ...\r\n\r\n }\r\n}\r\n```\r\n\r\nOf course, there are more subtleties to the change, such as dealing with shadows and such, all of which will have to adjusted to work for dark mode as well, but in general, I believe this approach should make the implementations relatively straightforward.\r\n\r\nAnother minor point that will need to be addressed is the naming convention for the variables. Since white becomes black in dark mode, it would probably be clearer if we renamed `--c-white` to something along the lines of `--c-background`.\r\n\r\n**Describe alternatives you've considered**\r\nI don't see any obvious alternatives, both in idea and implementation.\r\n\r\nOf course, one could simply do away with dark mode, but we would be missing out on its benefits.\r\n\r\n**Additional context**\r\nN/A\r\n",[2908],{"name":2879,"color":2880},251,"Dark Mode out of the box","2023-01-21T16:04:22Z","https://github.com/vuejs/vitepress/issues/251",0.72533417,{"description":2915,"labels":2916,"number":2917,"owner":2868,"repository":2869,"state":2870,"title":2918,"updated_at":2919,"url":2920,"score":2921},"### Is your feature request related to a problem? Please describe.\r\n\r\nI use Vitepress to document my component library. Sometimes, the style of the components is \"overridden\" by the Vitepress CSS, or just applied.\r\n\r\nFor example, with a component using a `\u003Ctable />` HTMLElement (https://maz-ui.com/components/maz-table), the VitePress CSS is applied to my component and changes its style. **I don't want it.** \r\n\r\n[See CSS file here](https://github.com/vuejs/vitepress/blob/df8753bd927c2b57b9188fb292c1429e9c3c8ab6/src/client/theme-default/styles/components/vp-doc.css#L176)\r\n\r\n```css\r\n.vp-doc table {\r\n display: block;\r\n border-collapse: collapse;\r\n margin: 20px 0;\r\n overflow-x: auto;\r\n}\r\n\r\n.vp-doc tr {\r\n background-color: var(--vp-c-bg);\r\n border-top: 1px solid var(--vp-c-divider);\r\n transition: background-color 0.5s;\r\n}\r\n\r\n.vp-doc tr:nth-child(2n) {\r\n background-color: var(--vp-c-bg-soft);\r\n}\r\n\r\n.vp-doc th,\r\n.vp-doc td {\r\n border: 1px solid var(--vp-c-divider);\r\n padding: 8px 16px;\r\n}\r\n\r\n.vp-doc th {\r\n text-align: left;\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: var(--vp-c-text-2);\r\n background-color: var(--vp-c-bg-soft);\r\n}\r\n\r\n.vp-doc td {\r\n font-size: 14px;\r\n}\r\n```\r\n\r\n### Describe the solution you'd like\r\n\r\nI don't want the style to be applied to selected elements.\r\n\r\n### Describe alternatives you've considered\r\n\r\nAs the [tailwindcss-typography](https://github.com/tailwindlabs/tailwindcss-typography) library suggests [here](https://github.com/tailwindlabs/tailwindcss-typography?tab=readme-ov-file#advanced-topics) with the class `not-prose`. \r\n\r\nI propose to add a class like `no-vp-style` or something else to not apply CSS to the HTML element where the class is set and other DOM inside.\r\n\r\n```md\r\n## Documentation\r\n\r\n\u003CMazTable class=\"no-vp-style\" />\r\n```\r\n\r\nWith a CSS rule like : \r\n\r\n```css\r\n.vp-doc table:not(:where([class~='no-vp-style'], [class~='no-vp-style'] *)) {\r\n ...\r\n}\r\n```\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.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.",[],3652,"Add CSS class to disable vitepress CSS to avoid conflicts and override","2024-03-21T00:04:41Z","https://github.com/vuejs/vitepress/issues/3652",0.7315678,{"description":2923,"labels":2924,"number":2928,"owner":2868,"repository":2869,"state":2870,"title":2929,"updated_at":2930,"url":2931,"score":2932},"### Describe the bug\r\n\r\nHi 👋🏻 \r\n\r\nI really liked the features like [Colored diff in code block](https://vitepress.dev/guide/markdown#colored-diffs-in-code-blocks) when introduced along with another features like code block focus mode.\r\n\r\nHowever, I was unable to use these features in Anu docs and today I also tried the same in my company's product documentaion but VitePress is unable to produce expected result.\r\n\r\nIf we grab the code snippet from official docs for \"Colored diff in code block\" our project's code snippet doesn't look same as VitePress's.\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/vite-fiz6gv?file=docs/example.md\r\n\r\n### Expected behavior\r\n\r\nCode block should look like as shown in VitePress site:\r\n\r\n\r\nHow it looks:\r\n\r\n\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: macOS 13.2.1\r\n CPU: (8) arm64 Apple M1\r\n Memory: 82.20 MB / 8.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node\r\n Yarn: 1.22.19 - ~/.nvm/versions/node/v18.15.0/bin/yarn\r\n npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm\r\n Browsers:\r\n Chrome: 112.0.5615.137\r\n Firefox: 112.0\r\n Safari: 16.3\r\n npmPackages:\r\n vitepress: 1.0.0-alpha.73 => 1.0.0-alpha.73\r\n```\r\n\r\n\r\n### Additional context\r\n\r\nNone\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] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2925],{"name":2926,"color":2927},"bug: pending triage","e99695",2282,"🐞 Syntax highlighting using inline comment features aren't working","2023-05-02T00:04:03Z","https://github.com/vuejs/vitepress/issues/2282",0.732739,{"description":2934,"labels":2935,"number":2936,"owner":2868,"repository":2869,"state":2870,"title":2937,"updated_at":2938,"url":2939,"score":2940},"### 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.7334567,{"description":2942,"labels":2943,"number":2944,"owner":2868,"repository":2869,"state":2870,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Describe the bug\r\n\r\nWhile auditing another site (which uses vitepress), I noticed the contrast ratio on code languages and line numbers doesn't meet WCAG guidelines.\r\n\r\n\u003Cimg width=\"700\" alt=\"\" src=\"https://github.com/user-attachments/assets/84ef9a18-94b2-41ad-bf0a-42991f01a5cb\" />\r\n\r\n\u003Cimg width=\"700\" alt=\"\" src=\"https://github.com/user-attachments/assets/a0d88f61-9edd-4d28-b60e-a6b8f5d25321\" />\r\n\r\nLooking back to color system PR [#2797](https://github.com/vuejs/vitepress/pull/2797) it seems as though `--vp-c-text-3` was not intended to be used with `--vp-c-bg-alt`\r\n\r\n> XXX-3: The color for solid background, such as bg color of the button. It must satisfy the contrast ratio with pure white (#ffffff) text on top of it\r\n\r\nI have a possible fix available and will submit a PR\r\n\r\n### System Info\r\n\r\n```Text\r\nSystem:\r\n OS: macOS 14.5\r\n CPU: (10) arm64 Apple M1 Max\r\n Memory: 5.63 GB / 32.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Browsers:\r\n Chrome: 131.0.6778.265\r\n Edge: 131.0.2903.112\r\n Safari: 17.5\r\n```\r\n\r\n### Validations\r\n\r\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\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] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[],4486,"Code block contrast ratio","2025-02-23T04:43:36Z","https://github.com/vuejs/vitepress/issues/4486",0.73575455,{"description":2950,"labels":2951,"number":2953,"owner":2868,"repository":2869,"state":2870,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### Describe the bug\r\n\r\nFirst, I use 1.3.2 Vitepress version and i use the latest version of Node (V.22).\r\nMy website is a documentation for languages i see so i add a logo and a text in my navigation. I use SVG for logos and i put a text for the name of the language like that :\r\n```js\r\n\u003Cdiv class=\"inline-content\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 1052 1052\">\u003Cpath fill=\"#f0db4f\" d=\"M0 0h1052v1052H0z\"/>\u003Cpath d=\"M965.9 801.1c-7.7-48-39-88.3-131.7-125.9-32.2-14.8-68.1-25.399-78.8-49.8-3.8-14.2-4.3-22.2-1.9-30.8 6.9-27.9 40.2-36.6 66.6-28.6 17 5.7 33.1 18.801 42.8 39.7 45.4-29.399 45.3-29.2 77-49.399-11.6-18-17.8-26.301-25.4-34-27.3-30.5-64.5-46.2-124-45-10.3 1.3-20.699 2.699-31 4-29.699 7.5-58 23.1-74.6 44-49.8 56.5-35.6 155.399 25 196.1 59.7 44.8 147.4 55 158.6 96.9 10.9 51.3-37.699 67.899-86 62-35.6-7.4-55.399-25.5-76.8-58.4-39.399 22.8-39.399 22.8-79.899 46.1 9.6 21 19.699 30.5 35.8 48.7 76.2 77.3 266.899 73.5 301.1-43.5 1.399-4.001 10.6-30.801 3.199-72.101zm-394-317.6h-98.4c0 85-.399 169.4-.399 254.4 0 54.1 2.8 103.7-6 118.9-14.4 29.899-51.7 26.2-68.7 20.399-17.3-8.5-26.1-20.6-36.3-37.699-2.8-4.9-4.9-8.7-5.601-9-26.699 16.3-53.3 32.699-80 49 13.301 27.3 32.9 51 58 66.399 37.5 22.5 87.9 29.4 140.601 17.3 34.3-10 63.899-30.699 79.399-62.199 22.4-41.3 17.6-91.3 17.4-146.6.5-90.2 0-180.4 0-270.9z\" fill=\"#323330\"/>\u003C/svg>\u003Cspan>Javascript\u003C/span>\u003C/div>\r\n```\r\n\r\nhere is the code i wrote for inline-content class : \r\n```css\r\n.inline-content {\r\n display: flex;\r\n align-items: center;\r\n}\r\n.inline-content svg {\r\n margin-right: 8px;\r\n}\r\n```\r\n\r\ni mostly use the logo and text with inline-content class when the collpased is true but i want use it when the collapsed is false. The bug happens for those links:\r\n```js\r\n {\r\n text:'\u003Cdiv class=\"inline-content\">\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMidYMid\" width=\"16\" height=\"16\" viewBox=\"0 0 256 252\">\u003Cpath d=\"M236 194c-14 0-25 1-34 5-3 1-7 1-7 4l3 6c2 3 5 8 9 11l11 8 21 10 11 9 6 4-3-6-5-5c-5-7-11-13-18-18-6-3-18-9-20-15h-1l12-3 18-3 8-2v-2l-9-10c-8-8-18-15-28-22l-18-8c-2-1-6-2-7-4l-7-13-15-30-8-20c-18-30-38-48-68-65-6-4-14-5-22-7l-13-1-8-6C34 5 8-9 1 9c-5 11 7 22 11 28l9 13 3 9c3 8 5 17 9 24l6 10c2 2 4 3 5 6-3 4-3 9-4 13-7 20-4 44 5 59 2 4 9 14 18 10 8-3 6-13 8-22l1-4 8 14c5 9 14 18 22 24 4 3 8 8 13 10l-4-4-9-10c-8-10-14-21-20-32l-7-17-3-6c-3 4-7 7-9 12-3 7-3 17-4 26h-1c-6-1-8-7-10-12-5-12-6-32-1-46 1-4 6-15 4-19-1-3-4-5-6-7l-7-12-10-30-9-13c-3-5-7-8-10-14-1-2-2-5 0-7l2-2c2-2 9 0 11 1 6 3 12 5 17 9l8 6h4c6 1 12 0 17 2 9 3 18 7 25 12 23 14 42 35 54 59 3 4 3 8 5 12l12 26c4 8 7 16 12 23 3 4 14 6 18 8l12 4 18 12c2 2 11 7 12 10Z\" fill=\"#00546B\"/>\u003Cpath d=\"m58 43-7 1 6 7 4 9v-1c3-1 4-4 4-8l-2-4-5-4Z\" fill=\"#00546B\"/>\u003Cspan>SQL\u003C/span>\u003C/svg>\u003C/div>',\r\n link:'/fr/language/sql/SQL'\r\n },\r\n {\r\n text:'\u003Cdiv class=\"inline-content\">\u003Csvg viewBox=\"0 0 256 256\" width=\"16\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMidYMid\">\u003Cpath d=\"M20 0h216c11.046 0 20 8.954 20 20v216c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0Z\" fill=\"#3178C6\"/>\u003Cpath d=\"M150.518 200.475v27.62c4.492 2.302 9.805 4.028 15.938 5.179 6.133 1.151 12.597 1.726 19.393 1.726 6.622 0 12.914-.633 18.874-1.899 5.96-1.266 11.187-3.352 15.678-6.257 4.492-2.906 8.048-6.704 10.669-11.394 2.62-4.689 3.93-10.486 3.93-17.391 0-5.006-.749-9.394-2.246-13.163a30.748 30.748 0 0 0-6.479-10.055c-2.821-2.935-6.205-5.567-10.149-7.898-3.945-2.33-8.394-4.531-13.347-6.602-3.628-1.497-6.881-2.949-9.761-4.359-2.879-1.41-5.327-2.848-7.342-4.316-2.016-1.467-3.571-3.021-4.665-4.661-1.094-1.64-1.641-3.495-1.641-5.567 0-1.899.489-3.61 1.468-5.135s2.362-2.834 4.147-3.927c1.785-1.094 3.973-1.942 6.565-2.547 2.591-.604 5.471-.906 8.638-.906 2.304 0 4.737.173 7.299.518 2.563.345 5.14.877 7.732 1.597a53.669 53.669 0 0 1 7.558 2.719 41.7 41.7 0 0 1 6.781 3.797v-25.807c-4.204-1.611-8.797-2.805-13.778-3.582-4.981-.777-10.697-1.165-17.147-1.165-6.565 0-12.784.705-18.658 2.115-5.874 1.409-11.043 3.61-15.506 6.602-4.463 2.993-7.99 6.805-10.582 11.437-2.591 4.632-3.887 10.17-3.887 16.615 0 8.228 2.375 15.248 7.127 21.06 4.751 5.811 11.963 10.731 21.638 14.759a291.458 291.458 0 0 1 10.625 4.575c3.283 1.496 6.119 3.049 8.509 4.66 2.39 1.611 4.276 3.366 5.658 5.265 1.382 1.899 2.073 4.057 2.073 6.474a9.901 9.901 0 0 1-1.296 4.963c-.863 1.524-2.174 2.848-3.93 3.97-1.756 1.122-3.945 1.999-6.565 2.632-2.62.633-5.687.95-9.2.95-5.989 0-11.92-1.05-17.794-3.151-5.875-2.1-11.317-5.25-16.327-9.451Zm-46.036-68.733H140V109H41v22.742h35.345V233h28.137V131.742Z\" fill=\"#FFF\"/>\u003C/svg>TypeScript\u003C/div>',\r\n link:'/fr/language/TypeScript/IntroTypeScript',\r\n }\r\n```\r\n\r\n### Reproduction\r\n\r\n1. go to my website: https://valtechno.netlify.app/fr/welcome\r\n2. Reload the browser and you'll see SQL, Typescript and Laravel (on PHP collapsed) dispeared\r\n\r\nhere a clear video that reproduce the bug:\r\n\r\nhttps://github.com/user-attachments/assets/2f984d5b-99ae-4da3-ac41-468e34a0a1c4\r\n\r\n\r\n\r\n### Expected behavior\r\n\r\nI don't want the links to disappear anymore when the browser is reloaded\r\n\r\n### System Info\r\n\r\n```Text\r\nSystem:\r\n OS: Windows 11 10.0.26100\r\n CPU: (8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz\r\n Memory: 3.50 GB / 15.74 GB\r\n Binaries:\r\n Node: 22.12.0 - C:\\Program Files\\nodejs\\node.EXE\r\n npm: 11.0.0 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Edge: Chromium (131.0.2903.70)\r\n Internet Explorer: 11.0.26100.1882\r\n npmPackages:\r\n vitepress: ^1.3.2 => 1.3.2\r\n```\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [ ] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\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] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[2952],{"name":2926,"color":2927},4463,"Links disapear when refresh the browser (Vitepress V-1.3.2)","2025-01-12T04:42:46Z","https://github.com/vuejs/vitepress/issues/4463",0.7377387,["Reactive",2959],{},["Set"],["ShallowReactive",2962],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fanYJIapVrJeTExfQpgvri1hj25b2OPl0HrJQ19wo1oE":-1},"/vuejs/vitepress/1006"]