{"id":20021351,"url":"https://github.com/piotrpdev/showdown-copy-code","last_synced_at":"2026-06-09T19:31:32.606Z","repository":{"id":57358904,"uuid":"457956253","full_name":"piotrpdev/showdown-copy-code","owner":"piotrpdev","description":"Showdown extension that adds a button above code blocks to quickly and easily copy code to the clipboard.","archived":false,"fork":false,"pushed_at":"2022-02-13T02:46:29.000Z","size":127,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-09T16:01:53.690Z","etag":null,"topics":["blocks","button","clipboard","code","copy","extension","highlight","showdown"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/piotrpdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-10T21:40:01.000Z","updated_at":"2023-11-12T02:19:06.000Z","dependencies_parsed_at":"2022-09-06T21:41:03.431Z","dependency_job_id":null,"html_url":"https://github.com/piotrpdev/showdown-copy-code","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/piotrpdev/showdown-copy-code","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piotrpdev%2Fshowdown-copy-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piotrpdev%2Fshowdown-copy-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piotrpdev%2Fshowdown-copy-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piotrpdev%2Fshowdown-copy-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/piotrpdev","download_url":"https://codeload.github.com/piotrpdev/showdown-copy-code/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piotrpdev%2Fshowdown-copy-code/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34123171,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"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":["blocks","button","clipboard","code","copy","extension","highlight","showdown"],"created_at":"2024-11-13T08:36:32.066Z","updated_at":"2026-06-09T19:31:32.576Z","avatar_url":"https://github.com/piotrpdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# showdown-copy-code\n\n[![Version](https://img.shields.io/npm/v/showdown-copy-code.svg)](https://www.npmjs.com/package/showdown-copy-code)\n\nShowdown extension that adds a button above code blocks to quickly and easily copy code to the clipboard.\n\n*~~Yoinked~~ **Heavily inspired** by [this project](https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-blocks-in-hugo/)* (*[go check out the creator](https://github.com/dguo)*).\n\n## How do I install it?\n\n```bash\nnpm install showdown-copy-code\n```\n\n## Usage\n\n*~~Yoinked~~ **Heavily inspired** by the [showdown-highlight example.](https://github.com/Bloggify/showdown-highlight#clipboard-example)*\n\n```js\nconst showdown = require(\"showdown\");\nconst showdownHighlight = require(\"showdown-highlight\");\nconst { showdownCopyCode } = require(\"showdown-copy-code\");\n\nlet converter = new showdown.Converter({\n  extensions: [showdownHighlight, showdownCopyCode],\n});\n\nconst html = converter.makeHtml(`\n## Highlighting Code with Showdown\n\nBelow we have a piece of JavaScript code:\n\n\u003cbr\u003e\n\n\\`\\`\\`js\ndocument.querySelector('#master-yoda')\n// =\u003e \u003cdiv id=\"master-yoda\"\u003eYoda\u003c/div\u003e\n\ndocument.querySelector('.class-of-assassins')\n// =\u003e \u003cdiv class=\"class-of-assassins\"\u003eAssassin\u003c/div\u003e\n\ndocument.querySelector('p')\n// =\u003e \u003cp\u003eThe three little pigs\u003c/p\u003e\n\ndocument.querySelector('[data-type=\"rocket\"]')\n// =\u003e \u003cdiv data-type=\"rocket\"\u003e🚀\u003c/div\u003e\n\\`\\`\\`\n`);\n\nconsole.log(html);\n```\n\n## Warning\n\n* **ONLY FULLY WORKS IN BROWSER** (Adds an event listener to the window to detect button clicks). If you load the module serverside AND on the browser, you may be able to call `showdownCopyCode.addListener()` on the browser. Otherwise, you need to do your own implementation.\n\n* Styles not included out of the box.\n\n* Needs testing.\n\n* Need to make sure the fix for the showdown-highlight `pre` option doesn't mess up.\n\n* Uses `navigator.clipboard`, which [might need a polyfill on older browsers.](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility)\n\n## Q\u0026A\n\n\u003e Why `{ showdownCopyCode }` instead of `showdownCopyCode`?\n\n[Default vs Named exports.](https://github.com/rollup/rollup/issues/1961)\n\n## License\n\nMIT\n\n## Resources Used/Help/Credit\n\n* [showdown-highlight](https://github.com/Bloggify/showdown-highlight/blob/master/lib/index.js)\n\n* [Blog post on clipboard buttons](https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-blocks-in-hugo/)\n\n* [Showdown extensions wiki page](https://github.com/showdownjs/showdown/wiki/Extensions)\n\n* [StackOverflow event listener question](https://stackoverflow.com/questions/12045440/difference-between-document-addeventlistener-and-window-addeventlistener)\n\n* [StackOverflow dynamic event listener question](https://stackoverflow.com/questions/11455515/how-to-check-whether-dynamically-attached-event-listener-exists-or-not)\n\n* [StackOverflow RegExp question](https://stackoverflow.com/questions/43784794/javascript-regex-ignore-anything-in-between)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiotrpdev%2Fshowdown-copy-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiotrpdev%2Fshowdown-copy-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiotrpdev%2Fshowdown-copy-code/lists"}