markdown-it-copy-code

[![npm version][npm-version-src]][npm-version-href]
[![License][license-src]][license-href]

Support copy code to clipboard for markdown-it.

Features

Using native javascript to copy code to clipboard so that we don't need to the compatibility of libraries like clipboard.js.


Usage

We supply plugin, style and script for you to use.

$3

`` sh
npm i markdown-it-copy-code
`

$3

` ts
import MarkdownIt from 'markdown-it'
import MarkdownItCopyCode from 'markdown-it-copy-code'

const md = new MarkdownIt()
md.use(MarkdownItCopyCode, {
// if you want use default config, just ignore options below.
// below shows default options
containerClass: 'markdown-copy-code-container',
buttonClass: 'markdown-copy-code-button',
copySVGClass: 'markdown-copy-code-copy',
doneSVGClass: 'markdown-copy-code-done',
// default is hugeicons:task-01
copySVG: '',
// default is hugeicons:task-done-01
doneSVG: '',
})
`

$3


You should run this script in your html file.
As an example, you can run it after mounting components in Vue.
` vue

`

$3

We supply three styles for you to use.
You can choose one of them based on your preference.

` ts
// no matter which style you choose, you should import base.css first
import 'markdown-it-copy-code/styles/base.css'
// choose one of the following styles
import 'markdown-it-copy-code/styles/large.css'
// import 'markdown-it-copy-code/styles/medium.css'
// import 'markdown-it-copy-code/styles/small.css'
`

You can also customize the style by yourself based on className` you set in options.
See large.css for reference.

[npm-version-src]: https://img.shields.io/npm/v/markdown-it-copy-code
[npm-version-href]: https://npmjs.com/package/markdown-it-copy-code
[license-src]: https://img.shields.io/github/license/howcasperwhat/markdown-it-copy-code.svg
[license-href]: https://github.com/howcasperwhat/markdown-it-copy-code/blob/main/LICENSE