Theme:

Copy to Clipboard Button

Add a button that copies the code block to the clipboard when clicked.

On this page

  1. 如何使用
  2. 设置
  3. 样式
  4. 范例

如何使用

该插件依赖于 Prism 工具栏 插件。除了使用 PrismJS 构建插件文件，确保在使用插件前已加载插件文件。

设置

默认情况下，该插件显示英文消息，并在单击后设置 5 秒的超时时间。您可以使用以下 HTML5 数据属性覆盖默认设置

该插件遍历 DOM 树来查找每个属性。从每个 pre code 元素开始搜索，并在具有所需属性的最近祖先元素处或最坏情况下在 html 元素处结束。

警告！虽然可行，但您绝对不应将这些属性添加到 html 元素，因为应在字符编码声明（<meta charset="...">）之后放置可读文本，而后者必须完全序列化在文档的前 512 字节（在较旧浏览器中）或 1024 字节中。请考虑使用 body 元素或其后代之一。

样式

该插件支持自定义复制按钮的样式。了解如何进行操作，我们来看看复制按钮的 HTML 结构

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

可以使用 copy-to-clipboard-button 类来选择该按钮。data-copy-state 属性指示该插件的当前状态，3 种可能的状态为

这 3 种状态应通过不同的样式或显示按钮文本传达给用户。

范例

共享

以下代码块显示了修改后的消息，两者都使用了半秒超时时间。其他设置已设为默认值。

源代码

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

输出

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

继承

该插件始终使用具有所需属性的最接近祖先元素，因此可以覆盖任何后代的任何设置。在以下示例中，使用 baz 消息。其他设置已设为默认值。

源代码

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

输出

int main() {
	return 0;
}

国际化

您可以使用数据属性进行国际化。

以下代码块使用了俄语共享消息和 5 秒的默认超时时间。

源代码

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

输出

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

下一个 HTML 文档使用英语，但一些代码块显示俄语和简体中文信息。其他设置使用默认值。

源代码

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

输出

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