markdown-it-copy

Todo

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

<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

1.1.x

1.1.0

1.1.1

1.1.2

1.2.x

1.2.0