gatsby-remark-prismjs-copy-button

0.4.0 • Public • Published

gatsby-remark-prismjs-copy-button

npm version

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

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.

    module.exports = {
      plugins: [
        {
          resolve: `gatsby-transformer-remark`,
          options: {
            plugins: [
              `gatsby-remark-prismjs-copy-button`,
              `gatsby-remark-prismjs`,
            ],
          },
        },
      ],
    };
  2. 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 }} />
      );
    }
  3. 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.

Package Sidebar

Install

npm i gatsby-remark-prismjs-copy-button

Weekly Downloads

78

Version

0.4.0

License

MIT

Unpacked Size

35.2 kB

Total Files

7

Last publish

Collaborators

  • thundermiracle