如何使用

该插件依赖于 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('你好，世界！');