\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.",[2879],{"name":2866,"color":2867},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.748344,{"description":2886,"labels":2887,"number":2891,"owner":2869,"repository":2870,"state":2892,"title":2893,"updated_at":2894,"url":2895,"score":2896},"### Describe the bug\n\nI noticed that certain Markdown extensions for code blocks do not work as expected in VitePress when using the **templ** language, while they work properly for other languages like **js**. Specifically:\n\n- **Not Working Properly**:\n - Focus in Code Blocks\n - Colored Diffs in Code Blocks\n - Errors and Warnings in Code Blocks\n- **Working as Expected**:\n - Line Highlighting in Code Blocks\n\nThanks\n\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vite-4gtyqrtf?file=docs%2Findex.md\n\nVisit the demo page by clicking the _MD Extensions Issue with Templ_ button on the homepage.\n\n\n### Expected behavior\n\nAll supported Markdown extensions for code blocks should render correctly, regardless of the specified language, as long as the language is supported by shiki. Since `templ` is a supported language, these extensions should work as expected, similar to how Line Highlighting currently works.\n\n### System Info\n\n```Text\nSystem:\n OS: macOS 15.2\n CPU: (8) arm64 Apple M3\n Memory: 434.31 MB / 24.00 GB\n Shell: 5.9 - /bin/zsh\n Binaries:\n Node: 20.18.1 - ~/.nvm/versions/node/v20.18.1/bin/node\n npm: 10.8.2 - ~/.nvm/versions/node/v20.18.1/bin/npm\n pnpm: 9.15.4 - ~/Library/pnpm/pnpm\n Browsers:\n Chrome: 131.0.6778.267\n Safari: 18.2\n npmPackages:\n vitepress: ^1.6.3 => 1.6.3\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.",[2888],{"name":2889,"color":2890},"bug: pending triage","e99695",4515,"closed","Markdown Extensions for Code Blocks Not Working Properly with ‘templ’ Language","2025-02-01T04:42:48Z","https://github.com/vuejs/vitepress/issues/4515",0.6833734,{"description":2898,"labels":2899,"number":2903,"owner":2869,"repository":2870,"state":2892,"title":2904,"updated_at":2905,"url":2906,"score":2907},"### Is your feature request related to a problem? Please describe.\n\nno\n\n### Describe the solution you'd like\n\nIf the highlight function is passed in `options: MarkdownOptions`, this function will be invoked, otherwise the default will be used.\r\n\r\n```ts\r\n const md = MarkdownIt({ \r\n html: true, \r\n linkify: true, \r\n highlight: options.highlight || await highlight(options.theme), \r\n ...options \r\n }) as MarkdownRenderer \r\n```\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.",[2900],{"name":2901,"color":2902},"build","377ba8",754,"Custom highlight","2023-01-21T14:32:58Z","https://github.com/vuejs/vitepress/issues/754",0.697705,{"description":2909,"labels":2910,"number":2914,"owner":2869,"repository":2870,"state":2892,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### Describe the bug\n\nAssume we have below code:\r\n\r\n```md\r\n:::tip\r\n\r\n```html{1}\r\n\u003Cdiv class=\"grid-row grid-cols-2 justify-items-stretch\">\r\n \u003Cdiv>\u003C/div>\r\n \u003Cdiv>\u003C/div>\r\n\u003C/div>\r\n\r\n:::\r\n```\r\n\r\nWith above code we get code block rendered like below:\r\n\r\n\r\n\n\n### Reproduction\n\nAbove code (code block with highlighted lines in custom block)\n\n### Expected behavior\n\nIt should highlight full line\n\n### System Info\n\n```shell\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04 LTS 22.04 LTS (Jammy Jellyfish)\r\n CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor\r\n Memory: 9.52 GB / 15.57 GB\r\n Container: Yes\r\n Shell: 0.12.1 - /home/jd/.xonsh/.venv/bin/xonsh\r\n Binaries:\r\n Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node\r\n Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.2/bin/yarn\r\n npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm\r\n Browsers:\r\n Chrome: 101.0.4951.64\r\n npmPackages:\r\n vitepress: 1.0.0-alpha.4 => 1.0.0-alpha.4\n```\n\n\n### Additional context\n\nNone\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.",[2911],{"name":2912,"color":2913},"theme","0754FB",959,"Line highlighting style in custom block isn't working as expected","2023-01-21T14:30:27Z","https://github.com/vuejs/vitepress/issues/959",0.7173804,{"description":2920,"labels":2921,"number":2925,"owner":2869,"repository":2870,"state":2892,"title":2926,"updated_at":2927,"url":2928,"score":2929},"### Describe the bug\r\n\r\nSome of the code markdown extensions do not work when the language is `vue`.\r\n\r\nIn particular, `[!code ++]`, `[!code --]`, `[!code warning]`, `[!code error]` and `[!code focus]` just show the comments at the end of the line.\r\n\r\nChanging the language to something else fixes this, e.g. `htmx` or `ts`.\r\n\r\nThis only seems to happen in the template tags of a `vue` code block. The highlighting works absolutely fine in the script part. Please see reproduction for code examples, I can't figure out how to escape the triple backtick code blocks here! ☹️ \r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/vite-arupmh?file=docs%2Fexample.md\r\n\r\n### Expected behavior\r\n\r\nThe markdown extensions should work correctly and highlight the lines as per [the docs](https://vitepress.dev/guide/markdown#focus-in-code-blocks).\r\n\r\n### System Info\r\n\r\n```Text\r\nSystem:\r\n OS: macOS 14.1.2\r\n CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\r\n Memory: 488.47 MB / 16.00 GB\r\n Shell: 5.9 - /bin/zsh\r\nBinaries:\r\n Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node\r\n Yarn: 1.22.10 - /usr/local/bin/yarn\r\n npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm\r\nBrowsers:\r\n Chrome: 120.0.6099.234\r\n Firefox: 112.0.2\r\n Firefox Developer Edition: 107.0\r\n Safari: 17.1.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- [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.",[2922],{"name":2923,"color":2924},"upstream","BF29ED",3503,"Markdown code extensions don't work in some situations","2025-02-01T04:42:47Z","https://github.com/vuejs/vitepress/issues/3503",0.71790284,{"description":2931,"labels":2932,"number":2936,"owner":2869,"repository":2870,"state":2892,"title":2937,"updated_at":2938,"url":2939,"score":2940},"### Describe the bug\n\nVS Code region names in Markdown file inclusion don't support special characters like dots (.) or hyphens (-), even though the documentation shows examples with hyphens. When attempting to include a region with these special characters, nothing is included in the output. Interestingly, if a region name doesn't exist at all, the entire file is included, but if the region exists and contains special characters, nothing is included.\n\n### Reproduction\n\n1. Create a markdown file with VS Code regions containing special characters in the region name:\n\n**Example with hyphens (`example-hyphen.md`):**\n```md\n\u003C!-- #region api-endpoints -->\n## GET /users\n\nFetches all users.\n\n## POST /users\n\nCreates a new user.\n\u003C!-- #endregion api-endpoints -->\n```\n\n**Example with dots (`example-dot.md`):**\n```md\n\u003C!-- #region auth.service -->\n## Login Method\n\nAuthenticates a user.\n\n## Logout Method\n\nEnds user session.\n\u003C!-- #endregion auth.service -->\n```\n\n2. Try to include these regions in another markdown file:\n\n```md\n# API Documentation\n\n\u003C!-- Trying to include region with hyphen -->\n\u003C!--@include: ./example-hyphen.md#api-endpoints-->\n\n\u003C!-- Trying to include region with dot -->\n\u003C!--@include: ./example-dot.md#auth.service-->\n```\n\n3. Build with VitePress - no content from the regions with special characters will be included\n\n### Expected behavior\n\nRegions with special characters like dots and hyphens should be properly included, as suggested by the documentation which shows examples with hyphens (e.g., `basic-usage`).\n\nFor the hyphen example, I expect:\n```md\n# API Documentation\n## GET /users\n\nFetches all users.\n\n## POST /users\n\nCreates a new user.\n```\n\nFor the dot example, I expect:\n```md\n# API Documentation\n## Login Method\n\nAuthenticates a user.\n\n## Logout Method\n\nEnds user session.\n```\n\nThe documentation itself uses `basic-usage` as an example region name with a hyphen, so this functionality should work.\n\n### System Info\n\n```Text\nSystem:\n OS: Windows 11 10.0.22631\n CPU: (16) x64 Intel(R) Core(TM) i7-6900K CPU @ 3.20GHz\n Memory: 17.34 GB / 31.90 GB\n Binaries:\n Node: 18.18.2 - C:\\Program Files\\nodejs\\node.EXE\n Yarn: 1.22.21 - ~\\AppData\\Roaming\\npm\\yarn.CMD\n npm: 9.8.1 - C:\\Program Files\\nodejs\\npm.CMD\n Browsers:\n Edge: Chromium (128.0.2739.79)\n Internet Explorer: 11.0.22621.3527\n npmPackages:\n vitepress: ^1.6.3 => 1.6.3\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.",[2933],{"name":2934,"color":2935},"need more info","bdbefc",4624,"VS Code Region Names in Markdown File Inclusion Don't Support Special Characters","2025-03-17T22:20:08Z","https://github.com/vuejs/vitepress/issues/4624",0.71901256,{"description":2942,"labels":2943,"number":2945,"owner":2869,"repository":2870,"state":2892,"title":2946,"updated_at":2947,"url":2948,"score":2949},"### Describe the bug\r\n\r\nhttps://github.com/vuejs/vitepress/blob/75ca9e4302c65e3bcc9518f7df928318380f6cf6/src/node/markdown/plugins/highlightLines.ts#L30\r\n\r\n`highlightLinePlugin` is used before `attrs`, and `token.info` is rewritten.\r\n\r\nvia https://github.com/vuejs/vitepress/pull/664#discussion_r902203459\r\n\r\n### Reproduction\r\n\r\n\u003Cimg width=\"177\" alt=\"image\" src=\"https://user-images.githubusercontent.com/8336744/174726207-1c068f94-f597-4d5e-9101-4709a08a60c3.png\">\r\n\r\n\u003Cimg width=\"299\" alt=\"image\" src=\"https://user-images.githubusercontent.com/8336744/174726233-83967c42-db47-4c12-8dbd-0c83a817c448.png\">\r\n\r\n\r\n### Expected behavior\r\n\r\nRender `data=\"asdf\"`\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: macOS 13.0\r\n CPU: (10) arm64 Apple M1 Max\r\n Memory: 13.84 GB / 64.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 16.15.1 - ~/Library/Caches/fnm_multishells/95455_1655742557079/bin/node\r\n Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/95455_1655742557079/bin/yarn\r\n npm: 8.12.1 - ~/Library/Caches/fnm_multishells/95455_1655742557079/bin/npm\r\n Browsers:\r\n Chrome: 102.0.5005.115\r\n Firefox: 101.0.1\r\n Safari: 16.0\r\n npmPackages:\r\n vitepress: ^1.0.0-alpha.2 => 1.0.0-alpha.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- [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.",[2944],{"name":2866,"color":2867},826,"support adding attributes to code blocks","2023-08-11T00:04:28Z","https://github.com/vuejs/vitepress/issues/826",0.7241994,{"description":2951,"labels":2952,"number":2953,"owner":2869,"repository":2870,"state":2892,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### Describe the bug\n\nThe line highlighting features are broke now in the official vitepress documentation: \u003Chttps://vitepress.vuejs.org/guide/markdown.html#line-highlighting-in-code-blocks>\n\n### Reproduction\n\nOpen \u003Chttps://vitepress.vuejs.org/guide/markdown.html#line-highlighting-in-code-blocks> and discover the lines are not highlighted:\r\n\r\n\r\n\r\nCan also be reproduced locally with:\r\n\r\n```shell\r\n$ mkdir vtprs && cd vtprs\r\n$ yarn init\r\n$ yarn add --dev vitepress\r\n```\r\n\r\nWrite some code blocks with lines highlighted in `docs/index.md`, like\r\n\u003Cpre>\r\n```toml{2}\r\n[highlight]\r\nnot_highlighted = true\r\npublic = false\r\n```\r\n\u003C/pre>\r\n\r\nrun `yarn vitepress dev docs` and discover that second line is not highlighted as expected.\n\n### Expected behavior\n\nCode lines are highlighted with minimal setup.\n\n### System Info\n\n```shell\nSystem:\r\n OS: Linux 5.14 Arch Linux\r\n CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz\r\n Memory: 5.12 GB / 15.49 GB\r\n Container: Yes\r\n Shell: 5.8 - /usr/bin/zsh\r\n Binaries:\r\n Node: 14.17.4 - /sbin/node\r\n Yarn: 1.22.15 - /sbin/yarn\r\n npm: 7.24.2 - /sbin/npm\r\n Browsers:\r\n Chromium: 94.0.4606.71\r\n Firefox: 93.0\r\n npmPackages:\r\n vitepress: ^0.19.2 => 0.19.2\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/coc)\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.",[],408,"Line Highlighting in Code Blocks breaks in v0.19.2","2023-01-21T16:20:27Z","https://github.com/vuejs/vitepress/issues/408",0.7279882,{"description":2959,"labels":2960,"number":2961,"owner":2869,"repository":2870,"state":2892,"title":2962,"updated_at":2963,"url":2964,"score":2965},"\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 creating a code block using line highlighting, it does not highlight the correct line. Instead it seems to highlight the line between the desired line and the previous line.\r\n\r\n**To Reproduce**\r\nSteps to reproduce the behavior:\r\n\r\nCreate a new vitepress project. In any markdown page create a codeblock and specify the line to highlight. Check the output and the correct line will not be highlighted.\r\n\r\nExample:\r\n\r\n```md\r\n## Usage\r\n```html{3}\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ckro-button @click=\"delete\">Delete Cake\u003C/kro-button>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n import { useDialog } from '@black-kro/ui';\r\n\r\n const { createDialog } = useDialog();\r\n\r\n export const delete = () => {\r\n createDialog({\r\n title: 'Delete Cake?',\r\n message: 'Are you sure you would like to delete the cake?',\r\n })\r\n .then(() => {\r\n // Delete Cake.\r\n })\r\n .catch(() => {\r\n // Don't delete Cake.\r\n })\r\n }\r\n\u003C/script>\r\n```\r\n\r\nOutput:\r\n\r\n\r\n**Expected behavior**\r\nLine 3 should be highlighted.\r\n\r\n**System Info**\r\n- vitepress version: 0.5.0\r\n- vite version: 1.0.0-rc.3\r\n- Node version: 14.7.0\r\n- OS version: Windows 10\r\n",[],63,"Code block line highlighting not highlighting correct line","2023-01-21T16:22:16Z","https://github.com/vuejs/vitepress/issues/63",0.7322022,["Reactive",2967],{},["Set"],["ShallowReactive",2970],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fTn5SEWqIAbcKYqyWHpw5gJ1gm7CzKHJf0W2lBhkCr_0":-1},"/vuejs/vitepress/313"]