CopyCode

for Reveal.js


let why = `Because we always want to copy code 
           during our presentations, right?`

Works out of the box

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.

Override button text and timing

…
Reveal.initialize({
    copycode: {
        copy: "Copy",
        copied: "Copied!",
        timeout: 1000
    },
    plugins: [ …
Override these global default values in the Reveal.js config. The timeout is the time in milliseconds for the "Copied!"-state to revert back to "Copy".

Override styling

…
Reveal.initialize({
    copycode: {
        copybg: "orange",
        copiedbg: "green",
        copycolor: "black",
        copiedcolor: "white"
    },
    plugins: [ …
Override these global default values in the Reveal.js config.

Turn it off or customize per element

<pre data-cc="false">
    <code>
        Here is the code	
    </code>
</pre>
<pre data-cc-copy="Copy HTML" data-cc-copied="Done">
    <code>
        Here is the code
    </code>
</pre>

Manual styling

Just edit the provided stylesheet.

…
<link rel="stylesheet" href="assets/js/revealjs/plugin/copycode/copycode.css">
…

Thanks