Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/piotrpdev/showdown-copy-code
Showdown extension that adds a button above code blocks to quickly and easily copy code to the clipboard.
https://github.com/piotrpdev/showdown-copy-code
blocks button clipboard code copy extension highlight showdown
Last synced: about 2 months ago
JSON representation
Showdown extension that adds a button above code blocks to quickly and easily copy code to the clipboard.
- Host: GitHub
- URL: https://github.com/piotrpdev/showdown-copy-code
- Owner: piotrpdev
- License: mit
- Created: 2022-02-10T21:40:01.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-13T02:46:29.000Z (almost 3 years ago)
- Last Synced: 2024-10-13T15:14:52.973Z (3 months ago)
- Topics: blocks, button, clipboard, code, copy, extension, highlight, showdown
- Language: JavaScript
- Homepage:
- Size: 124 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# showdown-copy-code
[](https://www.npmjs.com/package/showdown-copy-code)
Showdown extension that adds a button above code blocks to quickly and easily copy code to the clipboard.
*~~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)*).
## How do I install it?
```bash
npm install showdown-copy-code
```
## Usage
*~~Yoinked~~ **Heavily inspired** by the [showdown-highlight example.](https://github.com/Bloggify/showdown-highlight#clipboard-example)*
```js
const showdown = require("showdown");
const showdownHighlight = require("showdown-highlight");
const { showdownCopyCode } = require("showdown-copy-code");
let converter = new showdown.Converter({
extensions: [showdownHighlight, showdownCopyCode],
});
const html = converter.makeHtml(`
## Highlighting Code with Showdown
Below we have a piece of JavaScript code:
\`\`\`js
document.querySelector('#master-yoda')
// =>
Yoda
document.querySelector('.class-of-assassins')
// =>
Assassin
document.querySelector('p')
// =>
The three little pigs
document.querySelector('[data-type="rocket"]')
// =>
🚀
\`\`\`
`);
console.log(html);
```
## Warning
* **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.
* Styles not included out of the box.
* Needs testing.
* Need to make sure the fix for the showdown-highlight `pre` option doesn't mess up.
* Uses `navigator.clipboard`, which [might need a polyfill on older browsers.](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility)
## Q&A
> Why `{ showdownCopyCode }` instead of `showdownCopyCode`?
[Default vs Named exports.](https://github.com/rollup/rollup/issues/1961)
## License
MIT
## Resources Used/Help/Credit
* [showdown-highlight](https://github.com/Bloggify/showdown-highlight/blob/master/lib/index.js)
* [Blog post on clipboard buttons](https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-blocks-in-hugo/)
* [Showdown extensions wiki page](https://github.com/showdownjs/showdown/wiki/Extensions)
* [StackOverflow event listener question](https://stackoverflow.com/questions/12045440/difference-between-document-addeventlistener-and-window-addeventlistener)
* [StackOverflow dynamic event listener question](https://stackoverflow.com/questions/11455515/how-to-check-whether-dynamically-attached-event-listener-exists-or-not)
* [StackOverflow RegExp question](https://stackoverflow.com/questions/43784794/javascript-regex-ignore-anything-in-between)