設定

デフォルトでは、このプラグインは英語でメッセージを表示し、クリック後に 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 要素またはその子孫の 1 つを使用することを検討してください。

スタイル

このプラグインはコピーボタンのスタイルのカスタマイズをサポートしています。これがどのように行われるかを理解するために、コピーボタンの 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 つの状態は、別のスタイルまたはボタンテキストの表示によってユーザーに伝えられる必要があります。

サンプル

次のコードブロックは変更されたメッセージを示しており、どちらも 0.5 秒のタイムアウトを使用しています。他の設定はデフォルトに設定されています。

ソースコード

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

i18n

国際化にデータ属性を使用できます。

次のコードブロックはロシア語で共有メッセージを使用し、デフォルトの 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('你好，世界！');

使用方法

設定

スタイル

サンプル

共有

継承

i18n