戻る

prettify内のプログラムをコピーする処理

prettify内のプログラムをコピーするサンプルです。

[サンプル]

copyボタンをタップするとプログラムがクリップボードにコピーされた状態になります。

copy

let result = 0;
result = random(0);
console.log(result);
function random(num) {
  return Math.floor(Math.random() * num);
}
  

copy

let message = "Hello, world!";
console.log(message);
  

[headに実装する部分]
copy

.prettyprint ol.linenums > li {
	list-style-type: decimal; 
}
/* お好みでボタンのスタイルも設定 */
.copy-button {
	display: inline-block; /* インライン要素をブロック要素のように扱う */
	padding: 2px 5px; /* リンクテキストの周りに余白を追加 */
	border: 1px solid #000; /* 枠線を追加 */
	border-radius: 3px; /* 角を丸くする */
	text-decoration: none; /* デフォルトの下線を消す */
	color: #000; /* リンクの色 */
	background-color: #ffffcc; /* 背景色を黄色に */
	/* 蛍光ペン風の背景色 */
	/* background: linear-gradient(transparent 60%, #ffffcc 60%); */
}
.copy-button:hover {
	background-color: #ffeb99; /* ホバー時の背景色 */
}

copy

<a href="javascript:void(0);" id="copy1" class="copy-button" data-target="codeBlock1">copy</a>

a hrefタグのidはプログラムの処理としては使用されていませんが、
今後の機能拡張や個別操作のために必要となる可能性があります。


<pre id="codeBlock1" class="prettyprint linenums"> ... </pre>
「data-target」は「カスタムデータ属性」の一つであり、決まった書き方ではありません。
属性名が 「data-」で始まる任意の名前を自由に定義できるようになっています。
そのため、「data-target」という名前はよく使われる一例ですが、
例えば「data-code-target」や「data-copy-target」のように、用途に応じて自由に名前を付けることができます。


copy

// Clipboard API を利用したコピー処理
function copyCodeById(targetId) {
	const codeElement = document.getElementById(targetId);
	if (!codeElement) {
		console.error("対象のコードブロックが見つかりません: " + targetId);
		return;
	}
	// コードブロック内のテキストを取得（タグ内の書式設定が不要な場合は innerText でOK）
	const codeText = codeElement.innerText;
	
	if (navigator.clipboard && navigator.clipboard.writeText) {
			navigator.clipboard.writeText(codeText)
		.then(() => {
			console.log("コピー成功");
		})
		.catch(err => {
			console.error("コピー中にエラーが発生しました:", err);
		});
	} else {
		console.error("Clipboard API はこのブラウザで利用できません");
	}
}

// 各コピーリンクに共通のイベントリスナーを設定
document.querySelectorAll('.copy-button').forEach(function(button) {
	button.addEventListener('click', function() {
		const targetId = this.getAttribute('data-target');
		copyCodeById(targetId);
	});
});

document.querySelectorAllこのイベントリスナー内で、クリックされた要素の「data-target」属性から対象の id を取得し、
「copyCodeById」に渡しています。

戻る

back

Copying programs in prettify

This is an example of copying a program in prettify.

[sample]

When you tap the copy button, the program will be copied to the clipboard.

copy

let result = 0;
result = random(0);
console.log(result);
function random(num) {
  return Math.floor(Math.random() * num);
}
  

copy

let message = "Hello, world!";
console.log(message);
  

[Part to be implemented in head]
copy

.prettyprint ol.linenums > li {
	list-style-type: decimal; 
}
/* Style the buttons to your liking */
.copy-button {
	display: inline-block; /* Treat inline elements like block elements */
	padding: 2px 5px; /* Add space around link text */
	border: 1px solid #000; /* Add Border */
	border-radius: 3px; /* Rounded Corners */
	text-decoration: none; /* Remove the default underline */
	color: #000; /* Link Color */
	background-color: #ffffcc; /* Yellow background color */
	/* Highlighter-style background color */
	/* background: linear-gradient(transparent 60%, #ffffcc 60%); */
}
.copy-button:hover {
	background-color: #ffeb99; /* Background color on hover */
}

copy

<a href="javascript:void(0);" id="copy1" class="copy-button" data-target="codeBlock1">copy</a>

The id of the a href tag is not used for program processing, but may be required for future feature expansion or individual operations.

<pre id="codeBlock1" class="prettyprint linenums"> ... </pre>
"data-target" is one of the "custom data attributes" and there is no set way to write it.
You can freely define any name that starts with "data-".
Therefore, the name "data-target" is a commonly used example,
but you can freely name it according to your purpose, such as "data-code-target" or "data-copy-target".


copy

// Copy processing using the Clipboard API
function copyCodeById(targetId) {
	const codeElement = document.getElementById(targetId);
	if (!codeElement) {
		console.error("Target code block not found: " + targetId);
		return;
	}
	// Get the text inside a code block (innerText is OK if you don't need formatting inside tags)
	const codeText = codeElement.innerText;
	
	if (navigator.clipboard && navigator.clipboard.writeText) {
			navigator.clipboard.writeText(codeText)
		.then(() => {
			console.log("Copy successful");
		})
		.catch(err => {
			console.error("An error occurred while copying:", err);
		});
	} else {
		console.error("The Clipboard API is not available in this browser.");
	}
}

// Set a common event listener for each copy link
document.querySelectorAll('.copy-button').forEach(function(button) {
	button.addEventListener('click', function() {
		const targetId = this.getAttribute('data-target');
		copyCodeById(targetId);
	});
});

document.querySelectorAllWithin this event listener, we get the target id from the clicked element's "data-target" attribute and pass it to
"copyCodeById".

back