let why = `Because we always want to copy code during our presentations, right?`const http = require("http");
http.createServer(function (request, response) {
response.writeHead(200, {"Content-Type": "text/plain"});
response.end("Hello World\n");
}).listen(8081);A 'Copy' button is automatically added to any <pre> code block.
There are really only three steps:
Copy the copycode folder to the plugins folder of the reveal.js folder, like this: plugin/copycode. Load the script and reference it from the Reveal plugin options:
<script src="plugin/copycode/copycode.js"></script>
<script>
Reveal.initialize({
plugins: [ CopyCode ]
});
</script>This plugin is also published to, and can be installed from, npm:
npm install --save reveal.js-copycode
You can change window mode, visibility, the icon use or button texts easily per element:
<pre data-cc-window="My Code Example">
<code>
Here is the code
</code>
</pre>Data attributes for the window style are: data-cc-window-title (an other way of setting the title, where values like true can be used), data-cc-window-controls, data-cc-window-controlopacity, data-cc-window-padding.
This can also be set globally. See Global options.
Turn the button off
<pre data-cc-button="false"> // Or turn it all off, including window, with data-cc="false"
<code>
Here is the code
</code>
</pre>Or show only on hover over the code block
<pre data-cc-button="hover">
<code>
Here is the code
</code>
</pre>This can also be set globally. See Global options. Hover-only codeblocks will always show the copy button on touch devices.
<pre data-cc-display="icons">
<code>
Here is the code
</code>
</pre><pre data-cc-display="both">
<code>
Here is the code
</code>
</pre>This can also be set globally. See Global options.
<pre data-cc-copy="Copy HTML" data-cc-copied="Done">
<code>
Here is the code
</code>
</pre>This can also be set globally. See Global options.
The button option is to show the button, always or only on hover.
Reveal.initialize({
copycode: {
button: "always" // "always" | "hover"
},
plugins: [ CopyCode ]
})This can also be set per element with data-attributes.
The display option is to show text in the button, icons, or both.
Reveal.initialize({
copycode: {
display: "text" // "text" | "icons" | "both"
},
plugins: [ CopyCode ]
})This can also be set per element with data-attributes.
The text option is an object that contains the texts for the 'copy' and 'copied' state.
Reveal.initialize({
copycode: {
text: {
copy: "Copy",
copied: "Copied!"
}
},
plugins: [ CopyCode ]This can also be set per element with data-attributes.
The plaintextonly option can be set to false to allow copying of rich text and styles.
Reveal.initialize({
copycode: {
plaintextonly: true // true | false
},
plugins: [ CopyCode ]
})The timeout option is the time in milliseconds for the "Copied!"-state to revert back to "Copy".
Reveal.initialize({
copycode: {
timeout: 1000
},
plugins: [ CopyCode ]
})The style option is an object that contains settings for background colors, colors, sizing, spacing and border styles.
Reveal.initialize({
copycode: {
style: {
copybg: "orange", // Any CSS color, hex, named etc.
copiedbg: "green",
copycolor: "black",
copiedcolor: "white",
copyborder: "", // e.g. "1px solid blue"
copiedborder: "",
scale: 1,
offset: 0, // in em units
radius: 0 // in em units
}
},
plugins: [ CopyCode ]
})The window option (if not false) shows styled window controls, an optional title, and the copybutton vertically aligned at the top of the codeblock. The button will then never cover any code.
Reveal.initialize({
copycode: {
window: {
title: "", // Default window title
controls: "color", // "color" | "light" | "dark"
controlsOpacity: 1 // 0.0 - 1.0
padding: "0.5rem" // CSS size for padding around whole window
}
},
plugins: [ CopyCode ]
})All of the window options can also be set per element with data-attributes.
The tooltip option makes sure that the 'copied' text is shown in a tooltip, when an icon-only button display is used.
Reveal.initialize({
copycode: {
tooltip: true
},
plugins: [ CopyCode ]
})The iconsvg option is an object with placeholders for SVG icons for the 'copy' and 'copied' state. If left empty, it will use the default icons.
Reveal.initialize({
copycode: {
iconsvg: {
copy: '', // User can paste <svg>…</svg> code here
copied: '' // User can paste <svg>…</svg> code here
}
},
plugins: [ CopyCode ]
})CopyCode will automatically load the CSS if this is set to true.
Reveal.initialize({
copycode: {
cssautoload: true
},
plugins: [ CopyCode ]
})If CopyCode runs in a bundler or module environment, where you should use import for your styling, it will automatically turn off autoloading. You can still turn on autoloading, but you will need to manually add this setting like shown above.
The csspath option can be used when the you want to use your own stylesheet, instead of the provided one.
Reveal.initialize({
copycode: {
csspath: ''
},
plugins: [ CopyCode ]
})Use this if you really want to change things that you can't override from the Reveal.js config.
The global options make CopyCode very customizable. For example, to make all buttons look more like the standard GitHub copy-buttons, you can tweak the configuration like this:
copycode: { timeout: 1200, button: "hover", display: "icons", style: { copybg: "rgba(255,255,255,128)", copiedbg: "white", copyborder: "2px solid gray", copiedborder: "2px solid green", copiedcolor: "green", offset: 0.5, radius: 0.2} }