\r\n\r\n::: zh-CN\r\n中文\r\n:::\r\n\r\n::: en\r\nEnglish\r\n:::\r\n```\r\n\r\nThis reduces maintenance costs.\r\n\r\nI came up with a very low cost implementation - [CSS-I18N](https://github.com/valaxyjs/css-i18n)\r\nAnd I implemented it in my own project [valaxy](https://github.com/YunYouJun/valaxy).\r\n\r\nIt works well. You can preview it [here](https://valaxy.site/guide/i18n).\r\nAnd this is my implementation: [How to realize CSS i18n?](https://valaxy.site/posts/i18n#css-i18n-another-solution)\r\n\r\n---\r\n\r\nIt is very cost-effective and I hope to integrate it with vitepress.\r\nIf you agree with my proposal, please let me know and I can create a PR for 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/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.",[3040],{"name":3027,"color":3028},3047,"CSS i18n in one page","2025-03-02T18:10:37Z","https://github.com/vuejs/vitepress/issues/3047",0.79596967,{"description":3047,"labels":3048,"number":3049,"owner":3030,"repository":3031,"state":3050,"title":3051,"updated_at":3052,"url":3053,"score":3054},"I have a VitePress plugin which allows me to render a component next to the code for that component. This is very useful for showcasing how to use components in a library. \r\n\r\nFrom the Markdown input: \r\n\r\n```\r\n# MyButton\r\nAn example of the button component!\r\n:@/ButtonSample.vue:\r\n```\r\n\r\nThe desired output is the following:\r\n\r\n\r\n\r\nWhere `ButtonSample.vue` is a file containing the code for the 2 snippets and renders to show the two buttons at the bottom.\r\n\r\nAs you can see, this plugin was working with Vitepress `1.0.0-alpha.10` but after upgrading to `1.0.0-alpha.11`, the snippets are rendered but the component is missing.\r\n\r\nHere is the relevant snippet from the plugin:\r\n\r\n```ts\r\nconst TEMPLATE_START = /^\u003Ctemplate>$/\r\nconst TEMPLATE_END = /^\u003C\\/template>$/\r\nconst SCRIPT_START = /^\u003Cscript setup lang=\"ts\">$/\r\nconst SCRIPT_END = /^\u003C\\/script>$/\r\n\r\nconst COMPONENT_SNIPPET = (file: string) => `\r\n\u003Cscript setup lang=\"ts\">\r\nimport DemoComponent from \"${file}\";\r\n\u003C/script>\r\n\u003Cdiv class=\"vp-raw\">\r\n \u003Cdemo-component/>\r\n\u003C/div>\r\n`\r\n\r\n// when creating a demo section, `@/` will be replaced with `srcDir`\r\nexport const demoPlugin = (md: MarkdownIt, srcDir: string) => {\r\n const parser: RuleBlock = (state, startLine, _endLine, _silent) => {\r\n /*... some code to extract the file name from the markdown ... */\r\n token.attrSet('src', resolve(filename))\r\n return true\r\n }\r\n\r\n const renderer: RenderRule = (...args) => {\r\n /* ... some code to get `src` and check that the file exists ... */\r\n \r\n const file = readFileSync(src, 'utf8')\r\n\r\n // script\r\n token.info = `ts`\r\n token.content = findSection(file, SCRIPT_START, SCRIPT_END)\r\n const script = md.renderer.rules.fence!(...args)\r\n\r\n // template\r\n token.info = `vue-html`\r\n token.content = findSection(file, TEMPLATE_START, TEMPLATE_END)\r\n const template = md.renderer.rules.fence!(...args)\r\n\r\n // component\r\n const demo = md.render(COMPONENT_SNIPPET(src))\r\n\r\n return script + template + demo\r\n }\r\n\r\n md.renderer.rules.demo = renderer\r\n md.block.ruler.before(md.block.ruler.getRules('')[0].name, 'demo', parser)\r\n}\r\n\r\n// returns everything between the first match of `start` and the subsequent first match for `end`\r\nfunction findSection(content: string, start: RegExp, end: RegExp): string {\r\n //...\r\n}\r\n``` \r\n\r\nSo the markdown rendered used to take the line `const demo = md.render(COMPONENT_SNIPPET(src))` and automagically put the `import` statement where it needs to be and happily render the component. However, since updating to `1.0.0-alpha.11` this no longer works. In fact if I manually write out the import statement in the markdown file, everything works - so something is wrong with the way my plugin is handling the import.\r\n\r\nI looked into the way [plugin-sfc](https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-sfc) works and it looks like there was a change from `0.10.0` to `0.11.0` in the way script SFC blocks are handled.\r\n\r\nI tried to copy the way the changed code works in my plugin, but I have not managed to get it working:\r\n\r\n```ts\r\n const block = `\u003Cscript setup lang=\"ts\"> import DemoComponent from \"${src}\"; \u003C/script>`\r\n sfcBlocks.scriptSetup = block\r\n sfcBlocks.scripts.push(block)\r\n\r\n token.content = `\u003Cdiv class=\"vp-raw\"> \u003Cdemo-component/> \u003C/div>`\r\n const demo = md.renderer.rules.html_block!(...args)\r\n```\r\n\r\nDoes anyone know how this can be done? How can my plugin tell VitePress that it needs to import the demo component for this page?\r\n",[],1349,"closed","Import custom component in MarkdownIt plugin","2023-01-21T14:22:46Z","https://github.com/vuejs/vitepress/issues/1349",0.75387824,{"description":3056,"labels":3057,"number":3061,"owner":3030,"repository":3031,"state":3050,"title":3062,"updated_at":3063,"url":3064,"score":3065},"### Describe the bug\r\n\r\nSuch code:\r\n\r\n````md\r\n```vue twoslash :line-numbers\r\n\u003Cscript setup lang=\"ts\">\r\nimport {ref} from 'vue';\r\n\r\nconst message = ref('Hello world!');\r\n\u003C/script>\r\n```\r\n````\r\n\r\ncode block line numbers would be from 1 to 2, rather than from 1 to 5, [see here](http://localhost:5173/knowledge-base/TODO#bug)\r\n\r\n### Reproduction\r\n\r\nusing such code in `vitepress`:\r\n\r\n````md\r\n```vue twoslash :line-numbers\r\n\u003Cscript setup lang=\"ts\">\r\nimport {ref} from 'vue';\r\n\r\nconst message = ref('Hello world!');\r\n\u003C/script>\r\n```\r\n````\r\n\r\n### Expected behavior\r\n\r\nline number works correctly\r\n\r\n### System Info\r\n\r\n```Text\r\nnone\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.",[3058],{"name":3059,"color":3060},"bug: pending triage","e99695",3972,"[BUG]","2024-06-28T04:43:03Z","https://github.com/vuejs/vitepress/issues/3972",0.76918846,{"description":3067,"labels":3068,"number":3069,"owner":3030,"repository":3031,"state":3050,"title":3070,"updated_at":3071,"url":3072,"score":3073},"### Describe the bug\n\nTrying to have the project root outside the package directory leads to build errors as node is unavailable.\n\n### Reproduction\n\nI have the following directory structure:\r\n```text\r\n. # document root\r\n├─ .vitepress # config dir & node root \r\n ├─ config.mts\r\n ├─ package.json # node Package config\r\n └─ ...\r\n├─ en_US # documentation in english\r\n └─ ... # Markdown files and subdirectories\r\n├─ de_DE # documentation in german\r\n └─ ... # Markdown files and subdirectories\r\n```\r\nDue to the nature of the project I am working on, vitepress has to run in a yarn workspace. The current location for the workspace using vuepress is in the `.vuepress` folder. The directory structure is analogue to the one above. When executing `npx vitepress build ..` in the `.vitepress` directory some imports cannot be resolved. I believe, this is due to code beeing executed in `.` where `vue is unavailable`.\r\n\r\nIs there a way to solve this, or is it just not reasonable to have the node config below the document root. \n\n### Expected behavior\n\nI would expect the code to be executed in the cwd and therefore all imports beeing available.\n\n### System Info\n\n```Text\nOS: Manjaro Linux 6.6.19-1-MANJARO\r\nnode: v21.6.2\r\nvue: 3.4.21\r\nvitepress: 1.0.0-rc.45\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.",[],3667,"Unable to build with project root above package directory","2024-04-28T12:27:39Z","https://github.com/vuejs/vitepress/issues/3667",0.7754904,{"description":3075,"labels":3076,"number":3077,"owner":3030,"repository":3031,"state":3050,"title":3078,"updated_at":3079,"url":3080,"score":3081},"### Is your feature request related to a problem? Please describe.\n\nsome function in `frontmatter.title`, like below:\r\n\r\n```markdown\r\n---\r\nlayoutClass: a-home-layout\r\ntitle: ${{ getWishNameStr(GameName.ZZZ) }}时间轴\r\noutline: false\r\naside: false\r\nsidebar: false\r\ndoc: false\r\nfooter: false\r\n---\r\n```\r\n\r\n\u003Cimg width=\"532\" alt=\"123\" src=\"https://github.com/vuejs/vitepress/assets/34206897/6fd4f405-dddb-46d1-a164-7dee1aaa476f\">\r\n\n\n### Describe the solution you'd like\n\nThe page title should be the result of the calculation. In this case it should be: `调频时间轴 | Augus Game`\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.",[],4025,"What if I use the function in frontmatter?","2024-07-15T04:43:22Z","https://github.com/vuejs/vitepress/issues/4025",0.77703226,{"description":3083,"labels":3084,"number":3086,"owner":3030,"repository":3031,"state":3050,"title":3087,"updated_at":3088,"url":3089,"score":3090},"### Describe the bug\n\nJust follow the document, add workflow and push docs to repo.\r\nVitepress works well locally with `pnpm docs:dev`, but after deploy to github pages, it losts the index.md content, or in another word, useful part of them, as you can see, it does have the notes part\r\n[](https://imgse.com/i/xniiA1)\r\nI have checked the local build file, it contains the correct content.\r\nSince i used the exact workflow and already set the `base` config, i can't figure out why it leads to this.\n\n### Reproduction\n\nclone this repo [Youbei](https://github.com/Hellager/Youbei) and deploy its docs to the github pages\n\n### Expected behavior\n\nGithub pages show normally like docs in local\r\n[](https://imgse.com/i/xniuBd)\n\n### System Info\n\n```shell\nSystem:\r\n OS: Windows 10 10.0.19044\r\n CPU: (8) x64 Intel(R) Core(TM) i7-9700 CPU @ 3.00GHz\r\n Memory: 2.11 GB / 7.78 GB\r\n Binaries:\r\n Node: 16.13.1 - C:\\Program Files\\nodejs\\node.EXE\r\n Yarn: 1.22.19 - ~\\AppData\\Local\\pnpm\\yarn.CMD\r\n npm: 8.1.2 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Edge: Spartan (44.19041.1266.0), Chromium (105.0.1343.50)\r\n Internet Explorer: 11.0.19041.1566\r\n npmPackages:\r\n vitepress: 1.0.0-alpha.17 => 1.0.0-alpha.17\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.",[3085],{"name":3059,"color":3060},1413,"Deploying to github pages and lost both router and content ","2023-01-21T14:25:20Z","https://github.com/vuejs/vitepress/issues/1413",0.78230095,{"description":3092,"labels":3093,"number":3097,"owner":3030,"repository":3031,"state":3050,"title":3098,"updated_at":3099,"url":3100,"score":3101},"### Describe the bug\r\n\r\nComponents at the start of a line/paragraph don't render their contents as Markdown despite other Markdown renders doing so.\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/vite-jgrywo?file=docs%2Findex.md\r\n\r\nLook at \"Some Markdown\" line. I expected it to render as Markdown...\r\n\r\n### Expected behavior\r\n\r\nIt should render as Markdown. When rendered by other systems at least it does. e.g. VS Code Markdown preview.\r\n\r\n### System Info\r\n\r\n```Text\r\nSystem:\r\n OS: Linux 5.0 undefined\r\n CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\r\n Memory: 0 Bytes / 0 Bytes\r\n Shell: 1.0 - /bin/jsh\r\n Binaries:\r\n Node: 18.20.3 - /usr/local/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 10.2.3 - /usr/local/bin/npm\r\n pnpm: 8.15.6 - /usr/local/bin/pnpm\r\n npmPackages:\r\n vitepress: latest => 1.2.3\r\n```\r\n\r\n\r\n### Additional context\r\n\r\nVitePress:\r\n\r\n\r\nVS Code:\r\n\r\n\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.",[3094],{"name":3095,"color":3096},"wont fix","EDEED1",4017,"Components at the start of a line/paragraph don't render their contents as Markdown","2024-07-11T04:42:20Z","https://github.com/vuejs/vitepress/issues/4017",0.78261334,{"description":3103,"labels":3104,"number":3105,"owner":3030,"repository":3031,"state":3050,"title":3106,"updated_at":3107,"url":3108,"score":3109},"### Is your feature request related to a problem? Please describe.\n\nWhile Vue is a fantastic rendering engine, some people are more used to working with others. Or sometimes, companies decide on a specific engine for the whole company, and having one project that doesn't use it can be seen as a showstoper for using a piece of technology.\r\n\r\n\n\n### Describe the solution you'd like\n\nConsidering the name of this project is called Vitepress, I think it might be interesting to support other types of renderer (e.g. React) via official plugins like [Vite does](https://vitejs.dev/plugins/#vitejs-plugin-react).\r\n\r\nThat way, people could use the incredible features and toolset provided by Vitepress with the rendering technology of their choice. A little bit like [Astro](https://astro.build/) is going with their framework.\r\n\r\nI do understand that Vitepress is Vuepress's spiritual successor, but I have the impression that this could benefit a lot more people considering how powerful and useful Vitepress is. Even more so considering altneratives like Docusaurus are built on older and slower sets of technologies.\n\n### Describe alternatives you've considered\n\nI've seen on a twitter thread that it was possible to render react components somehow, though I'm not sure I've seen this documented anywhere.\n\n### Additional context\n\nn/a\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.",[],1532,"Support for Other Types of Renderer","2023-01-21T14:22:45Z","https://github.com/vuejs/vitepress/issues/1532",0.7842438,{"description":3111,"labels":3112,"number":3113,"owner":3030,"repository":3031,"state":3050,"title":3114,"updated_at":3115,"url":3116,"score":3117},"### Describe the bug\n\nvitepress 打包和 vite 存在一些差异,我在项目中使用 @antv/g2plot,如果使用 vite 可以正常编译,使用 vitepress 编译则会失败。\r\n尽管我可以将 @antv/g2plot 的依赖指定低版本避免这个错误,但是我想知道为什么会出现这种情况;\r\n\r\nen:There are some differences between vitepress compilation and vite, I use @antv/g2plot in my project, if I use vite it compiles fine, if I use vitepress it compiles fine, I use vitepress to compile it fails. Although I could avoid this error by specifying the dependency of @antv/g2plot at a lower version, I wonder why this is the case\n\n### Reproduction\n\n1. Create a new Vite+Vue project\r\n2. Add @ antv/g2plot dependency and use word cloud diagram in the component, for example: https://g2plot.antv.antgroup.com/examples/more-plots/word-cloud#same -place\r\n3. Preview effect, compile project, compile normally\r\n\r\n4. Install vitepress v1.2.3, initialize\r\n5. Create a component usage word cloud and import it in the document\r\n6. Compile document, compilation failed\r\n\r\nhttps://github.com/peiyanlu/vite-test-antv\n\n### Expected behavior\n\nbuild success\n\n### System Info\n\n```Text\nSystem:\r\n OS: Windows 11 10.0.26100\r\n CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13980HX\r\n Memory: 10.03 GB / 31.63 GB\r\n Binaries:\r\n Node: 18.16.0 - C:\\Program Files\\nodejs\\node.EXE\r\n npm: 9.5.1 - C:\\Program Files\\nodejs\\npm.CMD\r\n pnpm: 9.4.0 - ~\\AppData\\Local\\pnpm\\pnpm.EXE\r\n Browsers:\r\n Edge: Chromium (126.0.2592.87)\r\n Internet Explorer: 11.0.26100.1\r\n npmPackages:\r\n vitepress: ^1.2.3 => 1.2.3\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.",[],4021,"build error with @antv/g2plot","2024-07-18T04:42:22Z","https://github.com/vuejs/vitepress/issues/4021",0.78722197,["Reactive",3119],{},["Set"],["ShallowReactive",3122],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$frmOUchIBRYGKmUwIqcThqY3SYTVFKi4JSBGdwVgZ3u4":-1},"/vuejs/vitepress/4506"]