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.

Setup

Basics

There are really only three steps:

  1. Install and set up CopyCode
  2. Copy your code from a code block
  3. Paste your code somewhere

Install CopyCode

Copy the copycode folder to the plugins folder of the reveal.js folder, like this: plugin/copycode. Now load the script and make a reference to it in 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.

Now change it

You can change the visibility, the icon use or button texts easily per element:

Change the visibility per element

Turn it off

<pre data-cc="false">
    <code>
        Here is the code	
    </code>
</pre>

Or show only on hover over the code block

<pre data-cc="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.

Change the display of icons per element

<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.

Change the display of text per element

<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.

Global options

  1. button
  2. display
  3. text
  4. plaintextonly
  5. timeout
  6. style
  7. tooltip
  8. iconsvg
  9. csspath
  10. clipboardjspath

Option 1: button

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.

Option 2: display

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.

Option 3: text

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.

Option 4: plaintextonly

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 ]
})

Option 5: timeout

The timeout option is the time in milliseconds for the "Copied!"-state to revert back to "Copy". 

Reveal.initialize({
    copycode: {
        timeout: 1000
    },
    plugins: [ CopyCode ]
})

Option 6: style

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 ]
})

Option 7: tooltip

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 ]
})

Option 8: iconsvg

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 ]
})

Option 9: csspath

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, like the padding and so on.

Option 10: clipboardjspath

The clipboardjspath option is the path to ClipboardJS. When nothing is filled in here, it will automatically load from a CDN. 

Reveal.initialize({
    copycode: {
        clipboardjspath: ''
    },
    plugins: [ CopyCode ]
})

Using the global options

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} }

Credits