{"id":17242222,"url":"https://github.com/arronhunt/highlightjs-copy","last_synced_at":"2025-05-16T08:04:54.502Z","repository":{"id":38396490,"uuid":"376601151","full_name":"arronhunt/highlightjs-copy","owner":"arronhunt","description":"📋❇️ A simple, accessible highlightjs plugin to add a copy button to your code blocks.","archived":false,"fork":false,"pushed_at":"2025-03-13T15:15:13.000Z","size":97,"stargazers_count":115,"open_issues_count":9,"forks_count":30,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-11T12:49:13.104Z","etag":null,"topics":["highlightjs","syntax-highlighting"],"latest_commit_sha":null,"homepage":"https://highlightjs-copy.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arronhunt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-13T17:23:01.000Z","updated_at":"2025-05-02T03:44:11.000Z","dependencies_parsed_at":"2024-11-22T00:26:40.106Z","dependency_job_id":"2d08f078-74da-4c13-93a5-c84ea7967a17","html_url":"https://github.com/arronhunt/highlightjs-copy","commit_stats":{"total_commits":46,"total_committers":6,"mean_commits":7.666666666666667,"dds":"0.26086956521739135","last_synced_commit":"2d80ab7f0f805adf7f1917c100187becb5fa7ba6"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arronhunt%2Fhighlightjs-copy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arronhunt%2Fhighlightjs-copy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arronhunt%2Fhighlightjs-copy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arronhunt%2Fhighlightjs-copy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arronhunt","download_url":"https://codeload.github.com/arronhunt/highlightjs-copy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493378,"owners_count":22080126,"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","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":["highlightjs","syntax-highlighting"],"created_at":"2024-10-15T06:12:37.332Z","updated_at":"2025-05-16T08:04:53.408Z","avatar_url":"https://github.com/arronhunt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# highlightjs-copy\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/6b2257bf-a914-4f05-8166-a678eaff9fe8/deploy-status)](https://app.netlify.com/sites/highlightjs-copy/deploys)\n\nA simple, accessible [highlightjs](https://github.com/highlightjs/highlight.js) plugin to add a copy button to your codeblocks.\n\n![Preview](https://repository-images.githubusercontent.com/376601151/45b9bc80-cc37-11eb-936c-c3a55741bf77)\n\n## Demo\n\n[Check out the demo](https://highlightjs-copy.netlify.app)\n\n## Install\n\n### Using a CDN\n\n```html\n\u003cscript src=\"https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js\"\u003e\u003c/script\u003e\n```\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css\"\n/\u003e\n```\n\n### NPM\n\n```bash\nnpm install highlightjs-copy\n```\n\n## Usage\n\n### Basic usage\n\n```javascript\nhljs.addPlugin(new CopyButtonPlugin());\n```\n\n### Autohide\n\nBy default, the copy button is hidden until a user hovers the code block. Set this to `false` to have the copy button always visible.\n\n```javascript\nhljs.addPlugin(\n  new CopyButtonPlugin({\n    autohide: false, // Always show the copy button\n  })\n);\n```\n\n### With a callback\n\n```javascript\nhljs.addPlugin(\n  new CopyButtonPlugin({\n    callback: (text, el) =\u003e console.log(\"Copied to clipboard\", text),\n  })\n);\n```\n\n### Modify copied text with hooks\n\n```javascript\nhljs.addPlugin(\n  new CopyButtonPlugin({\n    hook: (text, el) =\u003e text + \"\\nCopied from my cool website.\",\n  })\n);\n```\n\n### Advanced hook example\n\n```html\n\u003c!-- Code block example --\u003e\n\u003cpre\u003e\n  \u003ccode class=\"language-bash\" data-replace=\"{{YOUR_API_KEY}}\" data-replaceWith=\"grtf32a35bbc...\"\u003e\n    gretel configure --key {{YOUR_API_KEY}}\n  \u003c/code\u003e\n\u003c/pre\u003e\n\n\u003cscript\u003e\n  hljs.addPlugin(\n    new CopyButtonPlugin({\n      hook: (text, el) =\u003e {\n        let { replace, replacewith } = el.dataset;\n        if (replace \u0026\u0026 replacewith) {\n          return text.replace(replace, replacewith);\n        }\n        return text;\n      },\n      callback: (text, el) =\u003e {\n        /* logs `gretel configure --key grtf32a35bbc...` */\n        console.log(text);\n      },\n    })\n  );\n  hljs.highlightAll();\n\u003c/script\u003e\n```\n\n## Localization\n\nhighlightjs-copy supports multiple locales by providing the correct language for accessibility.\n\n```js\nhljs.addPlugin(\n  new CopyButtonPlugin({\n    lang: \"es\", // The copy button now says \"Copiado!\" when selected.\n  })\n);\n```\n\nThis option is unnecessary if you correctly add the lang attribute to your document. You can override this behavior by providing the `lang` option as described above.\n\n```html\n\u003chtml lang=\"es\"\u003e\n  \u003cbody\u003e\n    \u003c!-- The plugin language defaults to `es` to match the document, so manually setting it is unnecessary. --\u003e\n    \u003cscript\u003e\n      hljs.addPlugin(new CopyButtonPlugin());\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIf the document has no `lang` set and the `lang` option is not provided, it will default to `en`.\n\n## Customization\n\n| CSS selector           | Details                                                                                                                                                                                                                             |\n| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `.hljs-copy-wrapper`   | Applied to the parent `\u003cpre\u003e` element that wraps the .hljs code.                                                                                                                                                                    |\n| `.hljs-copy-container` | A parent element to the button, in charge of absolute positioning and animating the button when hovering.                                                                                                                           |\n| `.hljs-copy-button`    | The copy button itself.\u003cbr /\u003e\u003cbr /\u003eThe variables `--hljs-theme-background` and `--hljs-theme-color` are automatically applied to the parent element. This allows the button to inherit the code block's text and background colors. |\n| `[data-copied='true']` | This data attribute is applied to the copy button and is set to `true` for two seconds when the copy action is performed.                                                                                                           |\n| `.hljs-copy-alert`     | A visually hidden status element that announces the copy confirmation to screen readers.                                                                                                                                            |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farronhunt%2Fhighlightjs-copy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farronhunt%2Fhighlightjs-copy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farronhunt%2Fhighlightjs-copy/lists"}