I want to use directives in markdown . for that i m using the remark-directive plugin. but now i dont understand how exactly i can decorate the html rendered by the plugin. in #general i was suggested to assign them html nodes and then use css to decorate. but aren't they assigned html notes automatically?
what do i do to assign custom classes to the html nodes generated?
#Want to understand more about how astro processes markdown
native eagle
left merlin
The remark-directive README gives you several example on how you can use it with a custom Remark plugin.
What Astro does is setting up the unified.js pipeline so you don't need to do it yourself. Then, through the config you can inject as many Remark/Rehype plugins you want.
To set up Markdown directives, you'll need something like:
import { defineConfig } from 'astro/config';
import remarkDirective from 'remark-directive';
import yourCustomRemarkPlugin from "./src/your-custom-remark-plugin";
export default defineConfig({
markdown: {
remarkPlugins: [ remarkDirective, yourCustomRemarkPlugin ]
}
})
Your custom plugin must be defined AFTER remarkDirective to be able to acces to the node types injected by remark-directive.
Now, in a Markdown file, if you write:
:::main
Some contents
:::
This will be converted to a containerDirective node. And the node name will be main because this is what appears right after :::.
So, you could assign the node.name as data.hName because this is a valid HTML element.
When you don't use HTML elements as name, for example:
:::note
if you chose xxx, you should also use yyy somewhere…
:::
You'll need to define yourself the tag you want to use in the end (e.g. a div, a span, a custom web element, etc.) because the node name will be note in this case.
To apply styles you have different options:
- adds an attribute to your directive like in this example: https://github.com/remarkjs/remark-directive?tab=readme-ov-file#example-styled-blocks (
:::note{.warning}), - adds the class names in your custom Remark plugin using
data.hProperties
Those two options require you to define globally the styles for .warning.
If you're using MDX instead of Markdown, you could also define the tagname as a custom web element (my-callout for example), and you could assign a custom Astro component to my-callout to override it. Then, your styles can be defined in your Astro component.
native eagle
What is the plugin remark-directive-rehype for then?
it says it converts nodes generated by remark-directive to html nodes
but doesn't this happen by default?
the problem im facing trying to understand is
that i dont know what steps astro already takes
and what i need to configure