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.md14
1 files changed, 6 insertions, 8 deletions
diff --git a/packages/integrations/markdoc/README.md b/packages/integrations/markdoc/README.md
index 85a657ea4..9a8bda3bb 100644
--- a/packages/integrations/markdoc/README.md
+++ b/packages/integrations/markdoc/README.md
@@ -143,28 +143,26 @@ 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, passing the built-in `level` attribute as a prop:
+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).
```js
// markdoc.config.mjs
-import { defineMarkdocConfig } from '@astrojs/markdoc/config';
+import { defineMarkdocConfig, Markdoc } from '@astrojs/markdoc/config';
import Heading from './src/components/Heading.astro';
export default defineMarkdocConfig({
nodes: {
heading: {
render: Heading,
- attributes: {
- // Pass the attributes from Markdoc's default heading node
- // as component props.
- level: { type: String },
- }
+ attributes: Markdoc.nodes.heading.attributes,
},
},
})
```
-Now, all Markdown headings will render with the `Heading.astro` component. This example uses a level 3 heading, automatically passing `level: 3` as the component prop:
+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.
+
+This example uses a level 3 heading, automatically passing `level: 3` as the component prop:
```md
### I'm a level 3 heading!
d5e1a3c0?s=13&d=retro' width='13' height='13' alt='Gravatar' /> Jarred Sumner 1-9/+10 2022-02-04Update test_command.zigGravatar Jarred Sumner 1-2/+0 2022-02-04`path.normalize()` tests passGravatar Jarred Sumner 2-146/+213 2022-02-03Fix test failures in path.joinGravatar Jarred Sumner 1-8/+115 2022-02-03Update mimalloc_arena.zigGravatar Jarred Sumner 1-0/+9 2022-02-03[bun test] Support multiple filesGravatar Jarred Sumner 1-2/+12 2022-02-03Update js_ast.zigGravatar Jarred Sumner 1-0/+1 2022-02-03Support loading multiple entry points by changing what `bun:main` points toGravatar Jarred Sumner 6-4/+36 2022-02-03[bun install] Configurable max http retry countGravatar Jarred Sumner 1-0/+7 2022-02-03Missing newline in errors in bun installGravatar Jarred Sumner 1-4/+8 2022-02-03Fix bug with http clientGravatar Jarred Sumner 6-107/+101 2022-02-03Move detectFastRefresh to later so HTTP request handler starts fasterGravatar Jarred Sumner 1-2/+1 2022-02-03Fix bug with macro remaps in Bun.Transpiler apiGravatar Jarred Sumner 2-5/+8 2022-02-03Slight improvement to non-ascii file path handlingGravatar Jarred Sumner 4-18/+79 2022-02-02`path.relative` passes Node's tests (which also fixed bugs)Gravatar Jarred Sumner 8-283/+571