该插件依赖于 Prism 工具栏 插件。除了使用 PrismJS 构建插件文件,确保在使用插件前已加载插件文件。
默认情况下,该插件显示英文消息,并在单击后设置 5 秒的超时时间。您可以使用以下 HTML5 数据属性覆盖默认设置
data-prismjs-copy
— 复制到剪贴板时显示的默认消息;data-prismjs-copy-error
— 复制失败后显示的消息,提示用户按 Ctrl+C
;data-prismjs-copy-success
— 复制成功后显示的消息;data-prismjs-copy-timeout
— 复制后的超时时间(以毫秒为单位)。一旦超时,成功或错误消息将恢复为默认消息。该值应该是非负整数。该插件遍历 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 种可能的状态为
data-copy-state="copy"
— 默认状态;data-copy-state="copy-error"
— 复制失败后的状态;data-copy-state="copy-success"
— 复制成功后的状态;这 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('你好,世界!');