How to add copy button

March 21, 2022 • ☕️ 1 min read

How to add copy button to your code block?

Install packages

Copy

npm install --save gatsby-transformer-remark gatsby-remark-prismjs gatsby-remark-prismjs-copy-button

Modify your gatsby-config.js

NOTE: You MUST put gatsby-remark-prismjs-copy-button before gatsby-remark-prismjs in plugins array.

Copy

module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-prismjs-copy-button`,
          `gatsby-remark-prismjs`,
        ],
      },
    },
  ],
};

A starter blog demonstrating what Gatsby can do.

Show Disqus →