summaryrefslogtreecommitdiff
path: root/packages/integrations/markdoc/README.md
diff options
context:
space:
mode:
Diffstat (limited to 'packages/integrations/markdoc/README.md')
-rw-r--r--packages/integrations/markdoc/README.md15
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)