0.0.2 • Published 9 months ago
@fujocoded/astro-rehype-html-headings v0.0.2
@fujocoded/astro-rehype-html-headings
Collects headings from a MD(X) file in an Astro environment, similar to how
Astro itself does with its getHeadings() function. The headings returned by this plugin, however, also include a html
properties
that includes the heading rendered to HTML.
!IMPORTANT
Thisrehype
plugin can only be used in Astro since it relies on the existence of the Astro frontmatter property
Sample usage
In astro.config.js
:
import { astroRehypeHtmlHeadings } from "@fujocoded/astro-rehype-html-headings";
export default defineConfig({
// ...
integrations: [
mdx({
rehypePlugins: [astroRehypeHtmlHeadings],
}),
],
});
In an astro file:
const chapters = await getCollection("chapters");
chapters.map(async (a) => {
const rendered = await a.render();
// The logged result will look like the result of the "getHeadings" Astro function,
// but will also contain the rendered HTML
console.log(rendered.remarkPluginFrontmatter.headings);
});