Like when the markdown contains <!-- aside --> we insert the <Aside/> component?
#Can we substitute a placeholder in markdown with an Astro component?
lament venture
sinful fogBOT
Hi @lament venture. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, you can substitute placeholders in markdown with Astro components. This can be achieved using the @astrojs/markdoc and @astrojs/mdx packages.
In @astrojs/markdoc, you can configure Markdoc tags that map to .astro components. For example, you can create a new tag by configuring the tag attribute in a markdoc.config.mjs|ts file at the root of your project. This tag can then be used in your Markdoc files. Here's an example of how to do this:
// markdoc.config.mjs
import { defineMarkdocConfig, component } from '@astrojs/markdoc/config';
export default defineMarkdocConfig({
tags: {
aside: {
render: component('./src/components/Aside.astro'),
attributes: {
type: { type: String },
},
},
},
});
Then in your markdown file, you can use the {% aside %} tag to render the Aside component:
# Welcome to Markdoc 👋
{% aside type="tip" %}
Use tags like this fancy "aside" to add some _flair_ to your docs.
{% /aside %}
In @astrojs/mdx, you can map Markdown syntax to custom components instead of their standard HTML elements. This allows you to write in standard Markdown syntax, but apply special component styling to selected elements. Here's an example of how to do this:
// src/pages/about.mdx
import Blockquote from '../components/Blockquote.astro';
export const components = {blockquote: Blockquote}
> This quote will be a custom Blockquote
In this example, the blockquote HTML element is replaced with a custom Blockquote component.
For more information, you can refer to the following guides:
- Markdoc Guide (https://docs.astro.build/en/guides/integrations-guide/markdoc/#render-components)
- MDX Guide (https://docs.astro.build/en/guides/integrations-guide/mdx/#assigning-custom-components-to-html-elements)