TiddlyWiki 安裝 Code Block 複製按鈕教學

說明

這個功能是為 TiddlyWiki 加上的 Code Block 一鍵複製按鈕，讓你在閱讀或整理程式碼、指令、文字片段時，不需要手動反白選取，直接點一下就能複製到剪貼簿。

This feature adds a one-click Copy button for code blocks in TiddlyWiki, making it easier to work with code snippets, commands, and text samples without manually highlighting and selecting the content.

當文章內出現程式碼區塊（code block）時，系統會自動在右上角加入一個 剪貼簿按鈕。使用者只要按一下，就能立即複製整段內容。

Whenever a code block appears in a tiddler, the system automatically places a clipboard button in the top-right corner. With a single click, users can instantly copy the entire block to the clipboard.

Step 1：新增按鈕功能 tiddler

建立新的 tiddler：

$:/wilk/buttons/copy-code/

2 個Tags：

$:/tags/Global

$:/wilk/tweaks/CopyCodeButton

內容貼上：

\widget $codeblock(code, language)
<div class="wilk-copy-code-button">
	<% if [<currentTiddler>!code-body[yes]] %>
		<$button
		message="tm-copy-to-clipboard"
		param=<<code>>
		tooltip="Copy"
		class="tc-btn-invisible">
			{{$:/core/images/copy-clipboard}}
		</$button>
	<% endif %>

	<$genesis
	$type="$codeblock"
	$remappable="no"
	code=<<code>>
	language=<<language>>/>
</div>
\end

---

Step 2：新增按鈕樣式 CSS

建立新的 tiddler：

$:/wilk/css/CopyCodeButton

Tags：

$:/tags/Stylesheet

$:/wilk/tweaks/CopyCodeButton

內容貼上：

div.wilk-copy-code-button {
	position: relative;
}
div.wilk-copy-code-button > button.tc-btn-invisible {
	position: absolute;
	right: 0;
	padding: 0.1em 0.2em;
	fill: <<colour tiddler-controls-foreground>>;
}
div.wilk-copy-code-button > button.tc-btn-invisible:hover {
	fill: <<colour tiddler-controls-foreground-hover>>;
}