markdown-it-copy-code

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.

Install

npm i markdown-it-copy-code

Options

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: '<svg>...</svg>',
  // default is hugeicons:task-done-01
  doneSVG: '<svg>...</svg>',
})

Script

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

<script setup lang="ts">
import { useCopyCode } from 'markdown-it-copy-code'
import { onMounted } from 'vue'

onMounted(() => {
  useCopyCode({
    // if you want use default config, just ignore options below.
    // below shows default options
    // same as above, but intended for decoupled frontend-backend environments
    buttonClass: 'markdown-copy-code-button',
    // milliseconds the button remains after copy success
    displayDuration: 2000,
  })
})
</script>

Style

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

// 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.