{"id":18226821,"url":"https://github.com/jpfulton/gatsby-remark-copy-button","last_synced_at":"2025-10-14T07:08:07.846Z","repository":{"id":185166068,"uuid":"673104153","full_name":"jpfulton/gatsby-remark-copy-button","owner":"jpfulton","description":"An MDX compatible Gatsby Remark plugin for creating a code region copy button.","archived":false,"fork":false,"pushed_at":"2024-01-10T23:38:54.000Z","size":1427,"stargazers_count":2,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-16T07:46:57.837Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jpfulton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-31T22:08:38.000Z","updated_at":"2024-07-08T02:48:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"49b55a5f-d655-464f-b2d7-eb3f2be4dfb6","html_url":"https://github.com/jpfulton/gatsby-remark-copy-button","commit_stats":null,"previous_names":["jpfulton/gatsby-remark-copy-button"],"tags_count":40,"template":false,"template_full_name":null,"purl":"pkg:github/jpfulton/gatsby-remark-copy-button","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpfulton%2Fgatsby-remark-copy-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpfulton%2Fgatsby-remark-copy-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpfulton%2Fgatsby-remark-copy-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpfulton%2Fgatsby-remark-copy-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jpfulton","download_url":"https://codeload.github.com/jpfulton/gatsby-remark-copy-button/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpfulton%2Fgatsby-remark-copy-button/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018206,"owners_count":26086303,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-04T05:03:42.428Z","updated_at":"2025-10-14T07:08:07.830Z","avatar_url":"https://github.com/jpfulton.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gatsby-remark-copy-button\n\n[![ci](https://github.com/jpfulton/gatsby-remark-copy-button/actions/workflows/ci.yml/badge.svg)](https://github.com/jpfulton/gatsby-remark-copy-button/actions/workflows/ci.yml)\n[![npm version](https://badge.fury.io/js/%40jpfulton%2Fgatsby-remark-copy-button.svg)](https://www.npmjs.com/package/@jpfulton/gatsby-remark-copy-button)\n![License](https://img.shields.io/badge/License-MIT-blue)\n![Visitors](https://visitor-badge.laobi.icu/badge?page_id=jpfulton.gatsby-remark-copy-button)\n\nAdd a copy button to **markdown** code snippets in\n[Gatsby](https://www.gatsbyjs.com) sites with\ncompatibility for **MDX** and use of the browser\n[Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API).\n\nThis package and implementation is discussed in this\n[blog post](https://www.jpatrickfulton.dev/blog/2023-08-02-gatsby-remark-copy-button/).\n\n## Install\n\n```bash\nyarn add @jpfulton/gatsby-remark-copy-button\n```\n\n## How to Use\n\nAdd the configuration entry to your `gatsby-config.js` file. This plugin\n**must** be added before other plugins that operate on `code` nodes and\nmarkdown code snippets to operate correctly.\n\nThe following listing assumes you are using the `gatsby-plugin-mdx` plugin.\nHowever, this plugin may also be used with the `gatsby-transformer-remark` plugin.\n\n```js\nplugins: [\n  {\n    resolve: `gatsby-plugin-mdx`,\n    options: {\n      extensions: [`.mdx`, `.md`],\n      gatsbyRemarkPlugins: [\n        {\n          resolve: `@jpfulton/gatsby-remark-copy-button`,\n        },\n        {\n          resolve: `gatsby-remark-code-titles`,\n        },\n        {\n          resolve: `gatsby-remark-prismjs`,\n        },\n      ],\n    },\n  },\n],\n```\n\n### Options\n\nAll plugin options are optional. However, it is strongly suggested that\nyou customize them to override styling to fit your site's look, feel and layout.\n\n```js\n{\n  resolve: `@jpfulton/gatsby-remark-copy-button`,\n  options: {\n    // Provide a text label for the copy button.\n    // Default: null\n    buttonText: null,\n    // Provide a complete SVG tag string to replace the default\n    // copy icon. Be sure to include a class of \"copy-icon\" on your custom\n    // SVG tag when using this option.\n    copySvg: null,\n    // Provide a complete SVG tag string to replace the default\n    // success icon.  Be sure to include a class of \"success-icon\" on your custom\n    // SVG tag when using this option.\n    successSvg: null,\n    // Provide a custom container class for the \u003cdiv\u003e tag that contains\n    // the copy button to apply custom styling.\n    // Default: \"gatsby-remark-copy-button-container\"\n    customButtonContainerClass: null,\n    // Provide a custom button class for the copy button to apply\n    // custom styling.\n    // Default: \"gatsby-remark-copy-button\"\n    customButtonClass: null,\n  },\n},\n```\n\n### Custom Styling\n\nCustom styling may be applied to the default classes or using the options\nabove custom classes may be applied to the injected markup.\n\n```css\n.gatsby-remark-copy-button-container {\n}\n.gatsby-remark-copy-button {\n}\n```\n\nApply custom styles by adding a style sheet to your `gatsby-browser.js` file.\n\n```js\n// gatsby-browser.js\nimport \"./src/styles/copy-button.scss\";\n```\n\n### Structure of the Injected Markup\n\nWhen enabled on code snippet, the following `HTML` will be injected into\nthe output of the page after parsing the Markdown AST using the default\nplugin options. It will be injected **above** the code snippet in the\ngenerated `HTML`.\n\n```html\n\u003cdiv class=\"gatsby-remark-copy-button-container\"\u003e\n  \u003cbutton\n    class=\"gatsby-remark-copy-button\"\n    onclick=\"copyToClipboard(`CLEANED CODE CONTENT TO COPY HERE`, this)\"\n  \u003e\n    \u003csvg\n      class=\"copy-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n    \u003e\n      ...\n    \u003c/svg\u003e\n    \u003csvg\n      class=\"success-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n    \u003e\n      ...\n    \u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n```\n\n### Usage in Markdown\n\nOnce installed, the copy button may _optionally_ be enabled by adding\nto the code snippet declaration within markdown files. When this plugin\nis used in conjunction with the `gatsby-remark-prismjs` plugin, the\n`{clipboardButton: true}` option may be provided in any order with other\nprismjs options.\n\n````markdown\n```js {clipboardButton: true}\nconst example = \"This content will end up on the user's clipboard\";\n```\n````\n\n## Further Information\n\nFor details on contributing to this project, reference both the\n[CONTRIBUTING.md](./CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)\ndocumentation.\n\nTo submit a bug or feature request, please open an issue\n[here](https://github.com/jpfulton/gatsby-remark-copy-button/issues/new/choose).\n\nTo report create a security advisory, please reference the\n[SECURITY.md](./SECURITY.md) policy document.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpfulton%2Fgatsby-remark-copy-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjpfulton%2Fgatsby-remark-copy-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpfulton%2Fgatsby-remark-copy-button/lists"}