diff options
Diffstat (limited to 'packages/integrations/markdoc/README.md')
| -rw-r--r-- | packages/integrations/markdoc/README.md | 15 |
1 files changed, 7 insertions, 8 deletions
diff --git a/packages/integrations/markdoc/README.md b/packages/integrations/markdoc/README.md index 9a8bda3bb..e3cec5499 100644 --- a/packages/integrations/markdoc/README.md +++ b/packages/integrations/markdoc/README.md @@ -143,30 +143,29 @@ Use tags like this fancy "aside" to add some *flair* to your docs. #### Render Markdoc nodes / HTML elements as Astro components -You may also want to map standard HTML elements like headings and paragraphs to components. For this, you can configure a custom [Markdoc node][markdoc-nodes]. This example overrides Markdoc's `heading` node to render a `Heading` component, and passes through [Markdoc's default attributes for headings](https://markdoc.dev/docs/nodes#built-in-nodes). +You may also want to map standard HTML elements like headings and paragraphs to components. For this, you can configure a custom [Markdoc node][markdoc-nodes]. This example overrides Markdoc's `heading` node to render a `Heading` component, and passes through Astro's default heading properties to define attributes and generate heading ids / slugs: ```js // markdoc.config.mjs -import { defineMarkdocConfig, Markdoc } from '@astrojs/markdoc/config'; +import { defineMarkdocConfig, nodes } from '@astrojs/markdoc/config'; import Heading from './src/components/Heading.astro'; export default defineMarkdocConfig({ nodes: { heading: { render: Heading, - attributes: Markdoc.nodes.heading.attributes, + ...nodes.heading, }, }, }) ``` -Now, all Markdown headings will render with the `Heading.astro` component, and pass these `attributes` as component props. For headings, Markdoc provides a `level` attribute containing the numeric heading level. +All Markdown headings will render the `Heading.astro` component and pass `attributes` as component props. For headings, Astro provides the following attributes by default: -This example uses a level 3 heading, automatically passing `level: 3` as the component prop: +- `level: number` The heading level 1 - 6 +- `id: string` An `id` generated from the heading's text contents. This corresponds to the `slug` generated by the [content `render()` function](https://docs.astro.build/en/guides/content-collections/#rendering-content-to-html). -```md -### I'm a level 3 heading! -``` +For example, the heading `### Level 3 heading!` will pass `level: 3` and `id: 'level-3-heading'` as component props. 📚 [Find all of Markdoc's built-in nodes and node attributes on their documentation.](https://markdoc.dev/docs/nodes#built-in-nodes) |