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 the plugin using below command

npm install gatsby-remark-autolink-headers


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.