Why isn't gatsby-transformer-remark adding IDs to headings so that I could link to them?

Question

I believe(d) that gatsby-transformer-remark automatically adds IDs to each heading so that you can link to them. Its tableOfContents generates links to such IDs yet my headings do not have them. Why? It should work as it does here https://using-remark.gatsbyjs.org/hello-world-kitchen-sink/ (which also adds gatsby-remark-autolink-headers for fancy effects).

See an example here https://blog.jakubholy.net/it-will-only-take-1h/, the code is at https://github.com/holyjak/blog.jakubholy.net

Thank you!

Answer 1

gatsby-transformer-remark automatically adds IDs to each heading

It doesn't, it's solely the work of gatsby-remark-autolink-headers. Autolink-headers is not only there for fancy effect, it actually generates the id for each header using github-slugger.

You can see the implementation detail here

Answer 2

You can use the gatsby-remark-heading-slug plugin which uses github-slugger to add IDs for you without any of the additional complexity of gatsby-remark-autolink-headers.