/eleventy-plugin-code-clipboard

Add clipboard copy button to your code block generated by 11ty

Primary LanguageJavaScriptMIT LicenseMIT

eleventy-plugin-code-clipboard

npm version

This plugin adds a clipboard copy button to the code snippets block(codetag) generated by eleventy.

The clipboard copy feature uses clipboard.js library. This Plugin assumes using with eleventy-plugin-syntaxhighlight plugin.

The plugin consists of the following contents.

markdown-it custom renderer

This custom renderer attaches clipboard copy button to code block with language(does nothing for non-language/mermaid block). Of course, it only supports eleventy markdown template(markdown-it).

The clipboard button is provided by Material Design Icons content-copy icon.

eleventy shortcode function

This shortcode initializes clipboard.js on window.onload event. If clipboard copy succeeded, it shows a tooltips with message(default to Copied!). Tooltips use Primer Tooltips CSS framework.

Usage

Add the following code to project's .eleventy.js.

const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const codeClipboard = require("eleventy-plugin-code-clipboard");
const markdownIt = require('markdown-it');

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(syntaxHighlight);
  eleventyConfig.addPlugin(codeClipboard);
  
  // others plugins, etc...
  
  const markdownLibrary = markdownIt({
    html: true
  }).use(codeClipboard.markdownItCopyButton);
  
  eleventyConfig.setLibrary("md", markdownLibrary);
  
  return {
    // your settings
  }
}

Add Primer/MDI CSS to your CSS or HTML.

@import url("https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/Primer/19.1.1/tooltips.min.css");

or

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Primer/19.1.1/tooltips.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

Add 11ty shortcode(named initClipboardJS) function your template. This will generate javascript code(scripttag) that initialize clipboard.js and attach onclick eventListener in your HTML.

<html>
  <head>...</head>
  <body>
    ...
    {% initClipboardJS %}
  </body>
</html>

Configuration

plugin options

eleventyConfig.addPlugin(codeClipboard, {
  // Version of clipboard.js to use. default to 2.0.8.
  clipboardJSVersion: '2.0.8',
  // Name of clipboard button css class. default to code-copy.
  // This class is also used to renderer
  // Click event of element with this class is listened by clipboard.js.
  buttonClass: 'code-copy',
  // Message if copy succeeds. default to "Copied!"
  successMessage: 'Copied!',
  // Message if copy failes. default to "Failed..."
  failureMessage: 'Failed...',
});

renderer options(markdown-it)

const markdownLibrary = markdownIt({
  html: true
}).use(codeClipboard.markdownItCopyButton, {
  // Style attributes of clipboard icon. default to the following.
  iconStyle: 'font-size: 15px; opacity: 0.8;',
  // Class attributes of clipboard icon. default to "mdi mdi-content-copy".
  iconClass: 'mdi mdi-content-copy',
  // Name of HTML tag of clipboard icon. default to span.
  iconTag: 'span',
  // Name of clipboard button css class. default to code-copy.
  // This class should be the same as the plugin options
  buttonClass: 'code-copy',
  // Style attributes of button. default to the following.
  buttonStyle: 'position: absolute; top: 7.5px; right: 6px; cursor: pointer; outline: none; opacity: 0.8;',
  // Additional class attributes in addition to the plugin option(buttonClass). default to empty.
  additionalButtonClass: '',
  // Name of title attribute in Button. default to "Copy".
  title: 'Copy',
});

Example

see here

Tips

If you use prismjs's dark theme, the color of the code block and the tooltip will be assimilated, so you will not be able to see the tooltip. To avoid this, overwrite the primer tooltip definition with your favorite color in CSS.

.tooltipped::before {
  color: #fcf !important;
  border-bottom-color: #ffccff !important;
}

.tooltipped::after {
  background-color: #fcf !important;
  color: #303 !important;
}