eleventy-plugin-code-clipboard v0.1.1
eleventy-plugin-code-clipboard
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 Iconify content-copy icon(default).
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(or eleventy.config.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 CSS to your CSS or HTML.
@import url("https://cdnjs.cloudflare.com/ajax/libs/Primer/19.1.1/tooltips.min.css");or
<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.11.
clipboardJSVersion: '2.0.11',
// 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, {
// Iconfiy icon URL. default to the following.
// To make changes, please refer to the Iconify page(https://icon-sets.iconify.design/)
iconifyUrl: 'https://api.iconify.design/mdi/content-copy.svg',
// Style attributes of clipboard icon. default to the following.
iconStyle: 'width: 16px; height: 16px;',
// Class attributes of clipboard icon. default to empty.
iconClass: '',
// 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; padding-top: 3px; 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
Migration(v0.1.0)
Prior to version 0.1.0, we used Material Design Icons WebFont. However, due to size issues, we have switched to using Iconify SVG.
There are some breaking changes that you should be aware of:
- CSS for Material Design Icons(WebFont) is no longer necessary.
- Iconify URLs have been added to the renderer settings.
- Default values for iconStyle/iconClass have been changed.
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;
}