diff options
Diffstat (limited to 'packages/integrations/markdoc/README.md')
| -rw-r--r-- | packages/integrations/markdoc/README.md | 25 |
1 files changed, 25 insertions, 0 deletions
diff --git a/packages/integrations/markdoc/README.md b/packages/integrations/markdoc/README.md index 4250813d3..15bf24467 100644 --- a/packages/integrations/markdoc/README.md +++ b/packages/integrations/markdoc/README.md @@ -136,6 +136,31 @@ Use tags like this fancy "aside" to add some _flair_ to your docs. {% /aside %} ``` +### Use Astro components from npm packages and TypeScript files + +You may need to use Astro components exposed as named exports from TypeScript or JavaScript files. This is common when using npm packages and design systems. + +You can pass the import name as the second argument to the `component()` function: + +```js +// markdoc.config.mjs +import { defineMarkdocConfig, component } from '@astrojs/markdoc/config'; + +export default defineMarkdocConfig({ + tags: { + tabs: { + render: component('@astrojs/starlight/components', 'Tabs'), + }, + }, +}); +``` + +This generates the following import statement internally: + +```ts +import { Tabs } from '@astrojs/starlight/components'; +``` + ### Custom headings `@astrojs/markdoc` automatically adds anchor links to your headings, and [generates a list of `headings` via the content collections API](https://docs.astro.build/en/guides/content-collections/#rendering-content-to-html). To further customize how headings are rendered, you can apply an Astro component [as a Markdoc node][markdoc-nodes]. |