How to use

The plugin depends on the Prism Toolbar plugin. In addition to including the plugin file with your PrismJS build, ensure it is loaded before the plugin.

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:

data-prismjs-copy — default message displayed by Copy to Clipboard;
data-prismjs-copy-error — a message displayed after failing copying, prompting the user to press Ctrl+C;
data-prismjs-copy-success — a message displayed after a successful copying;
data-prismjs-copy-timeout — a timeout (in milliseconds) after copying. Once the timeout passed, the success or error message will revert back to the default message. The value should be a non-negative integer.

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.

Styling

This plugin supports customizing the style of the copy button. To understand how this is done, let’s look at the HTML structure of the copy button:

<button class="copy-to-clipboard-button" type="button" data-copy-state="copy">
	<span>Copy</span>
</button>

The copy-to-clipboard-button class can be used to select the button. The data-copy-state attribute indicates the current state of the plugin with the 3 possible states being:

data-copy-state="copy" — default state;
data-copy-state="copy-error" — the state after failing copying;
data-copy-state="copy-success" — the state after successful copying;

These 3 states should be conveyed to the user either by different styling or displaying the button text.

Examples

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('你好，世界！');

How to use

Settings

Styling

Examples

Sharing

Inheritance

i18n