How to use

The plugin depends on clipboard.js and the Prism Toolbar plugin. In addition to including the plugin file with your PrismJS build, ensure they are loaded before the plugin.

The simplest way to include clipboard.js is to use any of the recommended CDNs. If you're using Browserify, clipboard.js will be loaded automatically if it's included in your package.json. If you don't load clipboard.js yourself, the plugin will load it from a CDN for you.

Settings

By default, the plugin shows messages in English and sets a 5-second timeout after a click. You can use the following HTML5 data attributes to override the default settings:

The plugin traverses up the DOM tree to find each of these attributes. The search starts at every pre code element and stops at the closest ancestor element that has a desired attribute or at the worst case, at the html element.

Warning! Although possible, you definitely shouldn't add these attributes to the html element, because a human-readable text should be placed after the character encoding declaration (<meta charset="...">), and the latter must be serialized completely within the first 512 (in older browsers) or 1024 bytes of the document. Consider using the body element or one of its descendants.

Examples

Sharing

The following code blocks show modified messages and both use a half-second timeout. The other settings are set to default.

Source code:

<body data-prismjs-copy-timeout="500">
	<pre><code class="language-js" data-prismjs-copy="Copy the JavaScript snippet!">console.log('Hello, world!');</code></pre>

	<pre><code class="language-c" data-prismjs-copy="Copy the C snippet!">int main() {
	return 0;
}</code></pre>
</body>

Output:

console.log('Hello, world!');
int main() {
	return 0;
}

Inheritance

The plugin always use the closest ancestor element that has a desired attribute, so it's possible to override any setting on any descendant. In the following example, the baz message is used. The other settings are set to default.

Source code:

<body data-prismjs-copy="foo">
	<main data-prismjs-copy="bar">
		<pre><code class="language-c" data-prismjs-copy="baz">int main() {
	return 0;
}</code></pre>
	</main>
</body>

Output:

int main() {
	return 0;
}

i18n

You can use the data attributes for internationalization.

The following code blocks use shared messages in Russian and the default 5-second timeout.

Source code:

<!DOCTYPE html>
<html lang="ru">
<!-- The head is omitted. -->
<body
	data-prismjs-copy="Скопировать"
	data-prismjs-copy-error="Нажмите Ctrl+C, чтобы скопировать"
	data-prismjs-copy-success="Скопировано!"
>
	<pre><code class="language-c">int main() {
	return 0;
}</code></pre>

	<pre><code class="language-js">console.log('Hello, world!');</code></pre>
</body>
</html>

Output:

int main() {
	return 0;
}
console.log('Hello, world!');

The next HTML document is in English, but some code blocks show messages in Russian and simplified Mainland Chinese. The other settings are set to default.

Source code:

<!DOCTYPE html>
<html lang="en"><!-- The head is omitted. -->
<body>
	<pre><code class="language-js">console.log('Hello, world!');</code></pre>

	<pre
		lang="ru"
		data-prismjs-copy="Скопировать"
		data-prismjs-copy-error="Нажмите Ctrl+C, чтобы скопировать"
		data-prismjs-copy-success="Скопировано!"
	><code class="language-js">console.log('Привет, мир!');</code></pre>

	<pre
		lang="zh-Hans-CN"
		data-prismjs-copy="复制文本"
		data-prismjs-copy-error="按Ctrl+C复制"
		data-prismjs-copy-success="文本已复制!"
	><code class="language-js">console.log('你好,世界!');</code></pre>
</body>
</html>

Output:

console.log('Hello, world!');
console.log('Привет, мир!');
console.log('你好,世界!');