theRDnotes

2020 February 20th

Part9: Header links

Today, we'll learn how to add Github-style hover links to all the headers on our page. For this we'll use a plugin called gatsby-remark-autolink-headers.
As this is a sub-plugin for gatsby-transformer-remark therefore this will added under options of gatsby-transformer-remark in gatsby-config.js file

Install

Install the plugin using below command

npm install gatsby-remark-autolink-headers

Configure

Add gatsby-remark-autolink-headers to the list of plugins under gatsby-transformer-remark

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [`gatsby-remark-autolink-headers`],
      },
    },
  ],
}

Note: If you are using gatsby-remark-prismjs then make sure this plugin is added before gatsby-remark-prismjs in the plugin list.

Tip: Restart the server, every time you install a plugin.

To learn about the options available to configure this plugin, please visit here.