gatsby-remark-prismjs-copy-button


Add copy button to your prismjs' code blocks.

!copy-button-preview

How to make it work

https://thundermiracle.com/blog/en/2022-03-13-gatsby-add-copy-button-to-code-block/

How to install

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

How to use

1. Add it to gatsby-config.js:

※ NOTE: You _MUST_ add gatsby-remark-prismjs-copy-button before gatsby-remark-prismjs, as gatsby-remark-prismjs will transform Code MarkdownASTs to HTML. So gatsby-remark-prismjs-copy-button will unable to find the Code MarkdownASTs to add copy button.

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

2. In your template.js.

`javascript
export const query = graphql
query ($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
}
}
;

export default function Template({ data }) {
return (