\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,"Import custom component in MarkdownIt plugin","2023-01-21T14:22:46Z","https://github.com/vuejs/vitepress/issues/1349",0.751831,["Reactive",3126],{},["Set"],["ShallowReactive",3129],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fw-bLht1cjdZCyrZh2hoPFxb4Me6C1aE-BQy2TwcHKQI":-1},"/vuejs/vitepress/4151"]