https://github.com/dcsunset/markdown-it-code-copy

A markdown-it plugin to add a copy icon in code blocks to copy the code.
https://github.com/dcsunset/markdown-it-code-copy

Last synced: about 15 hours ago
JSON representation

A markdown-it plugin to add a copy icon in code blocks to copy the code.

• Host: GitHub
• URL: https://github.com/dcsunset/markdown-it-code-copy
• Owner: DCsunset
• License: mit
• Created: 2020-05-11T09:31:43.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-08-12T22:13:36.000Z (5 months ago)
• Last Synced: 2024-12-26T09:06:41.436Z (8 days ago)
• Language: JavaScript
• Size: 43 KB
• Stars: 15
• Watchers: 5
• Forks: 12
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# markdown-it-code-copy

[![npm](https://img.shields.io/npm/v/markdown-it-code-copy.svg)](https://www.npmjs.com/package/markdown-it-code-copy)

[![GitHub](https://img.shields.io/github/license/DCsunset/markdown-it-code-copy)](https://github.com/DCsunset/markdown-it-code-copy/blob/master/LICENSE)

A markdown-it plugin to add a copy icon in code blocks to copy the code.

## Screenshots

![Screenshot](screenshot.png)

## Installation

```

npm i markdown-it-code-copy

```

## Usage

Make sure the corresponding icon font is installed

(default is [material-design-icons](https://dev.materialdesignicons.com/getting-started/webfont)).

```js

const md = require('markdown-it')()

	.use(require('markdown-it-code-copy'), {

		// Options

	});

```

### Options

| Name        | Default                                                                       | Description                               |

|-------------|-------------------------------------------------------------------------------|-------------------------------------------|

| iconStyle   | 'font-size: 21px; opacity: 0.4;'                                              | The style of copy icon                    |

| iconClass   | 'mdi mdi-content-copy'                                                        | The class of copy icon                    |

| buttonStyle | 'position: absolute; top: 7.5px; right: 6px; cursor: pointer; outline: none;' | The style of the button wrapper           |

| buttonClass | ''                                                                            | The class of the button wrapper           |

| element     | ''                                                                            | Custom HTML element as button body        |

| onSuccess   | undefined                                                                     | Function to call when copied successfully |

| onError     | undefined                                                                     | Function to call when error occurred      |

**Tips**:

If you want to use a different icon font,

change the icon class and make sure the corresponding icon font is installed.

## License

MIT License