markdown-it-copy

A markdown-it-plugin that copy code and others.

Todo

• [ ] 复制内容尾部增加版权说明

Example

🔗 example

Installation

npm install markdown-it-copy -S

Usage

Plugin

const options = {
    btnText: String, // 'copy' | button text
    failText: String, // 'copy fail' | copy-fail text
    successText: String, // 'copy success' | copy-success text
    successTextDelay: Number, // 2000 | successText show time [ms]
    extraHtmlBeforeBtn: String, // '' | a html-fragment before <button>
    extraHtmlAfterBtn: String, // '' | a html-fragment after <button>
    showCodeLanguage: Boolean, // false | show code language before [btn || extraHtmlBeforeBtn] | [add-after-1.1.0]
    attachText: String, // '' | some text append copyText， Such as: copyright | [add-after-1.2.0]
};

const md = require('markdown-it')()
    .use(require('markdown-it-copy'), options);

md.render(`${mdText}`);

// Tips: you may need to highlight your code, as follow:

const hljs = require('highlight.js');
const hlOpts = {
  highlight(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (__) {
        console.log(__);
      }
    }
    return '';
  },
};

require('markdown-it')(hlOpts);

Style of Button and Notify

Normal-theme:

• css: default.css
• stylus: default.styl

also, you can write style by yourself.

the html structure and class as follow:

<div class="m-mdic-copy-wrapper">
    <!-- if need show it -->
    <span class="u-mdic-copy-code_lang">${codeLang}</span>
    ${extraHtmlBeforeBtn}
    <div class="u-mdic-copy-notify">
        ${successText}
    </div>
    <button class="u-mdic-copy-btn j-mdic-copy-btn">
        ${btnText}
    </button>
    ${extraHtmlAfterBtn}
</div>

Releases

1.0.x

1.0.0、1.0.1

• [new function]
  • Support basic copy function

1.1.x

1.1.0

• [new function]
  • Support show code-language before btn or extraHtmlBeforeBtn

1.1.1

• [fix bug]
  • Compatible with a variety of templates
    • <div class="language-js">
    • <code class="language-js">
    • <pre class="language-js">
    • etc.

1.1.2

• [fix bug]
  • Single quotes encode
    • error: ' -> '
    • ok: ' -> \'

1.2.x

1.2.0

• [new function]
  • Support append text behind to copy content, such as: Copyright info.