How to use remark-gfm plugin with compileMdx function

[suryaashish-tyke]

I recently migrated from contentlayer to content-collections, now I am not sure how to add generated id to the heading in my mdx content using the plugin listed above.

[sdorra]

Hi @suryaashish-tyke, sorry i've missed your post. You can use remark plugins with mdx like that:

import { defineCollection, defineConfig } from "@content-collections/core";
import { compileMDX } from "@content-collections/mdx";
import remarkGfm from "remark-gfm";

const posts = defineCollection({
  name: "posts",
  directory: "content/posts",
  include: "*.mdx",
  schema: (z) => ({
    title: z.string(),
    summary: z.string(),
    date: z.coerce.date(),
    author: z.string(),
  }),
  transform: async (document, context) => {
    const mdx = await compileMDX(context, document, {
      remarkPlugins: [remarkGfm]
    });
    return {
      ...document,
      mdx,
    };
  },
});

export default defineConfig({
  collections: [posts],
});

But i think the remark-gfm plugin does not add ids to headings. The gfm adds support for github flavored markdown like checklists and strikethrough.

[suryaashish-tyke]

Yeah i think that is rehypeSlug

[suryaashish-tyke]

Yeah this works, thanks @sdorra