gatsby-remark-prismjs-copy-button
Add copy button to your prismjs' code blocks.
How to make it work
https://thundermiracle.com/blog/en/2022-03-13-gatsby-add-copy-button-to-code-block/
How to install
npm install --save gatsby-transformer-remark gatsby-remark-prismjs gatsby-remark-prismjs-copy-button
How to use
-
Add it to
gatsby-config.js
:※ NOTE: You MUST add
gatsby-remark-prismjs-copy-button
beforegatsby-remark-prismjs
, asgatsby-remark-prismjs
will transform Code MarkdownASTs to HTML. Sogatsby-remark-prismjs-copy-button
will unable to find the Code MarkdownASTs to add copy button.module.exports = { plugins: [ { resolve: `gatsby-transformer-remark`, options: { plugins: [ `gatsby-remark-prismjs-copy-button`, `gatsby-remark-prismjs`, ], }, }, ], };
-
In your template.js.
export const query = graphql` query ($slug: String!) { markdownRemark(fields: { slug: { eq: $slug } }) { html } } `; export default function Template({ data }) { return ( <div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }} /> ); }
-
Overwrite the style of the copy button.
You can overwrite the style of the copy button by adding the following class to your own
style.css
..gatsby-remark-prismjs-copy-button-container { left: 0; padding-right: 8px; }
How to contribute
If you have unanswered questions, would like help with enhancing or debugging the plugin, it is nice to include instructions for people who want to contribute to your plugin.
License
This project is licensed under the terms of the MIT license.