\n\n### Expected behavior\n\nI hope to use SVG and other methods instead of using masks to display icons, which can avoid frequent redrawing\n\n### System Info\n\n```Text\n\"vitepress\": \"^1.6.4\",\n```\n\n### Additional context\n\n\u003Cimg width=\"2559\" height=\"1042\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/39db5990-f3ee-47bb-8bcf-49272a1918f4\" />\n\n### Validations\n\n- [x] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [x] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [x] Read the [docs](https://vitepress.dev).\n- [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3162],{"name":3146,"color":3147},4917,"Bug: Frequent triggering of redrawing of navigation bar icons","2025-08-21T09:14:41Z","https://github.com/vuejs/vitepress/issues/4917",0.7011173,{"description":3169,"labels":3170,"number":3173,"owner":3152,"repository":3153,"state":3154,"title":3174,"updated_at":3175,"url":3176,"score":3177},"### Describe the bug\n\nWhen using an env variable `VITE_COLOR` to change the color of a theme importing a different CSS file depending on that variable, the behavior seem to be correct during development, but not after build.\n\n### Reproduction\n\nMinimal reproducible example:\r\n\r\nhttps://github.com/Peque/vitepress-color-change\r\n\r\nThe repository has two commits:\r\n\r\n- [First commit](https://github.com/Peque/vitepress-color-change/commit/9353b5782a1aa08685fd341b5d8b2c5bd4cb92dd) is just a basic Vitepress template.\r\n- [Second commit](https://github.com/Peque/vitepress-color-change/commit/f291c8834b1f7e97fd8bf8c9105e47bb79d278cd) introduces the code to use different colors depending on the `VITE_COLOR` variable.\r\n\r\nDevelopment works as expected:\r\n\r\n- ✅ `VITE_COLOR=red npm run docs:dev` -> Red color \r\n- ✅ `VITE_COLOR=blue npm run docs:dev` -> Blue color\r\n\r\nBuilds do not work as expected when opening `http-serve`:\r\n\r\n- ✅ `VITE_COLOR=red npm run docs:build` -> Red color\r\n- ❌ `VITE_COLOR=blue npm run docs:build` -> **Red color**\n\n### Expected behavior\n\nDevelopment works as expected:\r\n\r\n- ✅ `VITE_COLOR=red npm run docs:dev` -> Red color \r\n- ✅ `VITE_COLOR=blue npm run docs:dev` -> Blue color\r\n\r\nBuilds do not work as expected when opening `http-serve`:\r\n\r\n- ✅ `VITE_COLOR=red npm run docs:build` -> Red color\r\n- ✅ `VITE_COLOR=blue npm run docs:build` -> **Blue color**\n\n### System Info\n\n```Text\nSystem:\r\n OS: Linux 6.10 Fedora Linux 39 (Container Image)\r\n CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz\r\n Memory: 9.52 GB / 15.54 GB\r\n Container: Yes\r\n Shell: 5.2.15 - /bin/bash\r\n Binaries:\r\n Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node\r\n npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm\r\n npmPackages:\r\n vitepress: ^1.3.4 => 1.3.4 \r\n```\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3171,3172],{"name":3146,"color":3147},{"name":3149,"color":3150},4222,"Inconsistent handling of env variable in dev and build","2024-10-26T17:17:17Z","https://github.com/vuejs/vitepress/issues/4222",0.70279574,{"description":3179,"labels":3180,"number":3182,"owner":3152,"repository":3153,"state":3183,"title":3184,"updated_at":3185,"url":3186,"score":3187},"### 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.",[3181],{"name":3146,"color":3147},2282,"closed","🐞 Syntax highlighting using inline comment features aren't working","2023-05-02T00:04:03Z","https://github.com/vuejs/vitepress/issues/2282",0.66142994,{"description":3189,"labels":3190,"number":3194,"owner":3152,"repository":3153,"state":3183,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### Describe the bug\r\n\r\n```md\r\n```js\r\n// [!code ++:4]\r\nconsole.log(1);\r\nconsole.log(1);\r\n\r\nconsole.log(1);\r\n\\```\r\n```\r\n\r\nRenders this following example:\r\n\r\n\r\n\r\nThis is due because a `\u003Cspan class=\"line diff add\">\u003C/span>` (line 3) is created without any content, if we change it to `\u003Cspan class=\"line diff add\"> \u003C/span>`, it now renders correctly.\r\n\r\n\r\n\r\nNot sure if a blank space is the best fix. \r\n\r\nAlso, should a line only containing `// [!code ++:4]` be highlighted as well? \r\n\r\n### Reproduction\r\n\r\nabove\r\n\r\n### Expected behavior\r\n\r\nto work normally\r\n\r\n### System Info\r\n\r\n```Text\r\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)\r\n CPU: (20) x64 13th Gen Intel(R) Core(TM) i5-13600K\r\n Memory: 16.53 GB / 23.47 GB\r\n Container: Yes\r\n Shell: 5.8.1 - /usr/bin/zsh\r\n Binaries:\r\n Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node\r\n npm: 10.2.1 - ~/.nvm/versions/node/v20.9.0/bin/npm\r\n pnpm: 8.10.5 - ~/.nvm/versions/node/v20.9.0/bin/pnpm\r\n bun: 1.0.7 - ~/.bun/bin/bun\r\n npmPackages:\r\n vitepress: 1.0.0-rc.31 => 1.0.0-rc.31\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] 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.",[3191],{"name":3192,"color":3193},"build","377ba8",3305,"Colored Diffs in empty lines breaks + symbol","2024-01-08T00:04:50Z","https://github.com/vuejs/vitepress/issues/3305",0.6796067,{"description":3200,"labels":3201,"number":3203,"owner":3152,"repository":3153,"state":3183,"title":3204,"updated_at":3205,"url":3206,"score":3207},"### Describe the bug\r\n\r\n指定端口号后热更新失效,恢复默认之后热更新依旧不生效\r\n\r\n### Reproduction\r\n\r\nvitepress dev docs --host --port 9999\r\n\r\n### Expected behavior\r\n\r\n热更新生效\r\n\r\n### System Info\r\n\r\n```sh\r\nSystem: \r\n OS: Windows 10 10.0.19044 \r\n CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz\r\n Memory: 44.27 GB / 63.71 GB \r\n Binaries: \r\n Node: 14.18.2 - C:\\Program Files\\nodejs\\node.EXE \r\n Yarn: 1.22.19 - C:\\Program Files (x86)\\Yarn\\bin\\yarn.CMD \r\n npm: 6.14.15 - C:\\Program Files\\nodejs\\npm.CMD \r\n Browsers:\r\n Edge: Spartan (44.19041.1266.0), Chromium (112.0.1722.68)\r\n Internet Explorer: 11.0.19041.1566\r\n npmPackages:\r\n vitepress: 1.0.0-alpha.75 => 1.0.0-alpha.75\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] 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.",[3202],{"name":3146,"color":3147},2349,"热更新","2023-05-24T00:03:54Z","https://github.com/vuejs/vitepress/issues/2349",0.6822604,{"description":3209,"labels":3210,"number":3214,"owner":3152,"repository":3153,"state":3183,"title":3215,"updated_at":3216,"url":3217,"score":3218},"### Describe the bug\r\n\r\nI locate the problematic line by commenting. When `{{ }}` appears, Vitepress parses the code block in the `` line incorrectly.\r\nFor example:\r\n```jsx\r\n\u003Cdiv style={{ opacity: 1}}/>\r\n```\r\n\r\n### Reproduction\r\n\r\nnull\r\n\r\n### Expected behavior\r\n\r\nSupport to use `{{}}` in `` inline code blocks.\r\n\r\n### System Info\r\n\r\n```shell\r\nnull\r\n```\r\n\r\n\r\n### Additional context\r\n\r\n\r\n\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] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3211],{"name":3212,"color":3213},"invalid","ffffff",1988,"Build Error: Not Support {{}} in ``","2023-03-04T00:04:19Z","https://github.com/vuejs/vitepress/issues/1988",0.68295044,{"description":3220,"labels":3221,"number":3223,"owner":3152,"repository":3153,"state":3183,"title":3224,"updated_at":3225,"url":3226,"score":3227},"### Describe the bug\n\nWhen using code blocks, enabling line numbers, will result in them beeing below the code block.\n````md\n```js:line-numbers\nalert(1);\n```\n````\n\n\u003Cimg width=\"438\" height=\"154\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/6fb3624b-c800-4ec3-8588-8d9c10d64e69\" />\n\n\u003Cimg width=\"376\" height=\"181\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2f33e227-2f78-4d2d-a90e-796eb5842643\" />\n\n### Reproduction\n\nUse the default tempalte \"no style\" and add a code block with line-numbers.\n\nTested version: \"vitepress\": \"^1.6.3\"\n\n### Expected behavior\n\nThe line numbers are next to the code.\n\n### System Info\n\n```Text\nSystem:\n OS: Windows 10 10.0.19045\n CPU: (16) x64 AMD Ryzen 7 5800X3D 8-Core Processor\n Memory: 11.37 GB / 31.92 GB\n Binaries:\n Node: 22.3.0 - C:\\Program Files\\nodejs\\node.EXE\n Yarn: 1.22.17 - ~\\AppData\\Roaming\\npm\\yarn.CMD\n npm: 9.8.1 - C:\\Program Files\\nodejs\\npm.CMD\n Browsers:\n Chrome: 138.0.7204.169\n Edge: Chromium (136.0.3240.92)\n Internet Explorer: 11.0.19041.5794\n npmPackages:\n vitepress: ^1.6.3 => 1.6.3\n```\n\n### Additional context\n\nTested on Chrome, Edge and Firefox - all have the same issue.\n\n### Validations\n\n- [x] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [x] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [x] Read the [docs](https://vitepress.dev).\n- [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3222],{"name":3146,"color":3147},4865,"markdown :line-numbers","2025-07-29T22:58:24Z","https://github.com/vuejs/vitepress/issues/4865",0.6864228,{"description":3229,"labels":3230,"number":3232,"owner":3152,"repository":3153,"state":3183,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### Describe the bug\n\n```js\r\nexport default {\r\n paths() {\r\n return [\r\n {\r\n params: {\r\n title: \"test1\",\r\n content: `tttt\r\n yyyy\r\n qqq`,\r\n\r\n },\r\n },\r\n ]\r\n },\r\n }\r\n```\r\n\r\n```md\r\n# {{ $params.title }}\r\n\r\n11111 content ↓↓↓\r\n\r\n\u003C!-- @content -->\r\n\r\n\r\n2222 content ↑↑↑\r\n\r\n```\n\n### Reproduction\n\nhttps://stackblitz.com/~/edit/vite-sqe6dh?file=docs%2Findex.md\n\n### Expected behavior\n\nContent displayed normally\n\n### System Info\n\n```Text\nSystem:\r\n OS: Windows 11 10.0.22621\r\n CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-1235U\r\n Memory: 7.25 GB / 15.64 GB\r\n Binaries:\r\n Node: 21.6.1 - C:\\Program Files\\nodejs\\node.EXE\r\n npm: 10.2.4 - C:\\Program Files\\nodejs\\npm.CMD\r\n pnpm: 8.15.1 - C:\\Program Files\\nodejs\\pnpm.CMD\r\n Browsers:\r\n Edge: Chromium (121.0.2277.98)\r\n Internet Explorer: 11.0.22621.1\r\n npmPackages:\r\n vitepress: 1.0.0-rc.41 => 1.0.0-rc.41\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3231],{"name":3146,"color":3147},3543,"\"\u003C! -- @ content -->\" is not available in the Rendering Raw Content","2024-02-13T00:04:48Z","https://github.com/vuejs/vitepress/issues/3543",0.6929106,{"description":3238,"labels":3239,"number":3240,"owner":3152,"repository":3153,"state":3183,"title":3241,"updated_at":3242,"url":3243,"score":3244},"### Describe the bug\n\nHeya, I'm experiencing a weird issue with Code Blocks which started by the beginning of this year after updating to a newer version from `1.3.2`.\nThe Highlighting used to work fine with an older version of vitepress but now it seems to be broken.\n\nResult right now:\n\n\n\nThe affected file is located here: https://github.com/AzonInc/Doorman/blob/master/docs/en/guide/firmware/additions.md\n\n### Reproduction\n\nCreate a Code Block using this MD:\n\n```yaml\nbinary_sensor: // [!code ++] // [!code focus]\n - platform: tc_bus // [!code ++] // [!code focus]\n name: \"Custom Command\" // [!code ++] // [!code focus]\n type: open_door // [!code ++] // [!code focus]\n address: 0 // [!code ++] // [!code focus]\n web_server: // [!code ++] // [!code focus]\n sorting_group_id: sorting_group_listeners // [!code ++] // [!code focus]\n```\n\n### Expected behavior\n\n// [!code ++] // [!code focus] shouldn't be visible and also not randomly applied.\n\n### System Info\n\n```Text\nSystem:\n OS: Windows 11 10.0.26120\n CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor\n Memory: 9.89 GB / 31.91 GB\n Binaries:\n Node: 21.1.0 - C:\\Program Files\\nodejs\\node.EXE\n Yarn: 1.22.17 - ~\\AppData\\Roaming\\npm\\yarn.CMD\n npm: 10.2.5 - C:\\Program Files\\nodejs\\npm.CMD\n pnpm: 6.11.0 - ~\\AppData\\Roaming\\npm\\pnpm.CMD\n Browsers:\n Chrome: 135.0.7049.116\n Edge: Chromium (136.0.3240.29)\n npmPackages:\n vitepress: ^2.0.0-alpha.5 => 2.0.0-alpha.5\n```\n\n### Additional context\n\nAm I doing anything wrong or is it really broken?\n\n### Validations\n\n- [x] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [x] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [x] Read the [docs](https://vitepress.dev).\n- [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[],4729,"Code Block Highlighting is broken","2025-05-03T13:08:14Z","https://github.com/vuejs/vitepress/issues/4729",0.69335717,["Reactive",3246],{},["Set"],["ShallowReactive",3249],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fySyAmljYZdyhgmJ65y3TdgAcgnNu3GQJs_fovegMRPk":-1},"/vuejs/vitepress/4776"]