This text, despite having\nline breaks in it, should still be\nrendered on a single line.\n\nBut it doesn't.\n```\nThis unexpectedly renders as follows:\n```\nTestComponent This text, despite having\n\nline breaks in it, should still be rendered on a single line.\n\nBut it doesn't.\n```\nNote that this does not happen if the Markdown line starts with a bit of text instead of with the Vue component:\n```md\nFor some reason, \u003CTestComponent /> this example\nrenders fine.\n```\n```\nFor some reason, TestComponent this example renders fine.\n```\n\n### Reproduction\n\n- Create a component with inline display style\n- Start a new Markdown paragraph with that component and continue across multiple Markdown lines\n - **There must be no text before the component**\n- The first line break within the Markdown source for that paragraph will render as an actual line break\n\nA repro is available here: https://stackblitz.com/edit/vite-xxlcwfge?file=docs%2Findex.md\n\n### Expected behavior\n\nThe line break in the Markdown source should not render as an actual line break. The example from above should render as follows:\n```\nTestComponent This text, despite having line breaks in it, should still be rendered on a single line.\n\nBut it doesn't.\n``` \n\n### System Info\n\n```Text\nSystem:\n OS: Windows 10 10.0.19045\n CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz\n Memory: 4.86 GB / 15.94 GB\n Binaries:\n Node: 22.14.0 - C:\\Program Files\\nodejs\\node.EXE \n npm: 10.9.2 - C:\\Program Files\\nodejs\\npm.CMD \n Browsers:\n Edge: Spartan (44.19041.3636.0), Chromium (127.0.2651.74)\n Internet Explorer: 11.0.19041.3636\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.",[2950],{"name":2951,"color":2952},"upstream","BF29ED",4626,"Markdown lines starting with an inline Vue component are incorrectly considered to be a whole paragraph","2025-04-10T13:10:53Z","https://github.com/vuejs/vitepress/issues/4626",0.76154286,{"description":2959,"labels":2960,"number":2962,"owner":2874,"repository":2875,"state":2885,"title":2963,"updated_at":2964,"url":2965,"score":2966},"### Describe the bug\r\n\r\nThe header anchors are not accessible to screen reader users.\r\n\r\n```html\r\n\u003Ch1 id=\"what-is-vitepress\" tabindex=\"-1\">\r\n What is VitePress?\r\n \u003Ca class=\"header-anchor\" href=\"#what-is-vitepress\" aria-hidden=\"true\">#\u003C/a>\r\n\u003C/h1>\r\n```\r\n\r\nSetting `aria-hidden` on focusable elements (that are not hidden from **all** users) fails test \"[aria-hidden elements do not contain focusable elements](https://dequeuniversity.com/rules/axe/4.4/aria-hidden-focus?utm_source=lighthouse&utm_medium=devtools)\".\r\n\r\nI'm preparing a PR to fix this issue.\r\n\r\n### Reproduction\r\n\r\nNo special configuration necessary. Header anchors are enabled by default.\r\n\r\nThis issue can be tested on the official [VitePress](https://vitepress.vuejs.org/guide/what-is-vitepress) site or any other basic vitepress deployment using the default-theme.\r\n\r\n### Expected behavior\r\n\r\nProvide an accessible default configuration for `markdown-it-anchor` and update styling of header-anchors accordingly.\r\n\r\nA possible solution could look like this:\r\n\r\n```html\r\n\u003Cdiv class=\"header-wrapper\">\r\n \u003Ch1 id=\"what-is-vitepress\" tabindex=\"-1\">What is VitePress?\u003C/h1>\r\n \u003Ca class=\"header-anchor\" href=\"#what-is-vitepress\" aria-label=\"Permalink to \"What is VitePress?\"\">#\u003C/a>\r\n\u003C/div>\r\n```\r\n\r\nA viable `markdown-it-anchor` configuration could look like this.\r\n```js\r\n{\r\n anchor: {\r\n permalink: MdItAnchor.permalink.linkAfterHeader({\r\n style: \"aria-label\",\r\n assistiveText: (title) => `Permalink to \"${title}\"`,\r\n visuallyHiddenClass: \"visually-hidden\",\r\n wrapper: ['\u003Cdiv class=\"header-wrapper\">', \"\u003C/div>\"],\r\n }),\r\n },\r\n}\r\n```\r\n\r\nAdditionally, some updates for anchor styling are necessary too.\r\n```css\r\n.vp-doc .header-wrapper {\r\n position: relative;\r\n}\r\n\r\n.vp-doc .header-wrapper .header-anchor {\r\n line-height: 32px;\r\n position: absolute;\r\n top: 0;\r\n}\r\n\r\n.vp-doc .header-wrapper h1 + .header-anchor {\r\n line-height: 40px;\r\n font-size: 32px;\r\n}\r\n\r\n.vp-doc .header-wrapper h2 + .header-anchor {\r\n padding-top: 25px;\r\n line-height: 32px;\r\n font-size: 24px;\r\n}\r\n\r\n.vp-doc .header-wrapper h3 + .header-anchor {\r\n line-height: 28px;\r\n font-size: 20px;\r\n}\r\n\r\n.vp-doc .header-anchor:hover,\r\n.vp-doc .header-anchor:focus,\r\n.vp-doc h1:hover + .header-anchor,\r\n.vp-doc h2:hover + .header-anchor,\r\n.vp-doc h3:hover + .header-anchor,\r\n.vp-doc h4:hover + .header-anchor,\r\n.vp-doc h5:hover + .header-anchor,\r\n.vp-doc h6:hover + .header-anchor {\r\n opacity: 1;\r\n}\r\n```\r\n\r\n### System Info\r\n\r\n```shell\r\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: 19.26 GB / 31.13 GB\r\n Container: Yes\r\n Shell: 5.0.17 - /bin/bash\r\nBinaries:\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\nBrowsers:\r\n Chrome: 110.0.5481.177\r\n Chromium: 110.0.5481.100\r\n Firefox: 110.0.1\r\n```\r\n\r\n\r\n### Additional context\r\n\r\nMore details about test \"aria-hidden elements do not contain focusable elements\" can be found at [https://dequeuniversity.com/rules/axe/4.4/aria-hidden-focus](https://dequeuniversity.com/rules/axe/4.4/aria-hidden-focus).\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.",[2961],{"name":2895,"color":2896},2039,"Header anchors not accessible to screen reader users.","2023-03-22T00:03:24Z","https://github.com/vuejs/vitepress/issues/2039",0.7620429,["Reactive",2968],{},["Set"],["ShallowReactive",2971],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fDv4etmvRoc9SFNj94j4TMJnGwxQT16VMi4ttzLndGsY":-1},"/vuejs/vitepress/3133"]