內容簡介
Sticky Copy Button for Code Blocks 自動為網站上的每個 <pre><code> 區塊添加浮動複製按鈕，方便開發者、讀者及教學使用者輕鬆複製程式碼，提升使用體驗。
【主要功能】
• 自訂按鈕位置（上下、左右）
• 可調整按鈕標籤（“Copy” / “Copied”）
• 支援最大高度設定及滾動功能
• 顯示行號的選項
• 自訂 CSS 樣式
外掛標籤
開發者團隊
② 後台搜尋「Sticky Copy Button for Code Blocks」→ 直接安裝（推薦）
原文外掛簡介
Sticky Copy Button for Code Blocks automatically adds a floating copy button to each
block on your website.
It provides convenient front-end copying for developers, readers, and tutorial users.
Features
This plugin is light, fast, and highly customizable:
Adjustable button position (up/down and left/right)
Customizable labels (“Copy” / “Copied”)
Adjustable font size
Background color, text color, or transparent mode
Max-height option for large code blocks (with scroll support)
Optional line numbers (simple native implementation)
Custom CSS that is safely sanitized
No dependencies such as Prism or Highlight.js are required.
Detailed Settings Guide
The following explains every option in the plugin settings page.
1. Button Position
Adjust vertical position (top offset in px)
Moves the button up or down relative to the top of the code block.
Use positive or negative values to fine-tune vertical alignment.
Adjust horizontal position (right offset in px)
Moves the button left or right by adjusting how far it sits from the right edge of the code block.
Use positive or negative values to fine-tune horizontal alignment.
These values help fine-tune button alignment to avoid overlapping with theme elements.
2. Button Text and Behavior
Copy button label
The label shown normally (default: “Copy”).
Label after copying (2 seconds)
Once the text is copied, the button temporarily displays this label.
Default: “Copied”.
3. Button Size
Button size (8–36 px)
Controls the font size of the button.
Padding is automatically adjusted based on this value.
4. Button Colors
Button text color
Hex color of button text.
Button background color
Hex background color.
When copying, the plugin automatically swaps the text and background colors for visual feedback.
However, if the background is transparent, only the text color is swapped.
Always transparent background
If enabled:
– The button background always becomes transparent.
– Only text + border remain visible
5. Code Block Max Height
Code block max height (px)
Sets a maximum height (minimum: 100px).
Content taller than this becomes scrollable.
Enable
Must be checked for the value to apply.
This prevents long code blocks from stretching your page layout.
6. Display Line Numbers
Display Line Numbers (Enable)
Shows simple line numbers next to each line.
Notes:
– Line height is unified for consistency.
– Theme-specific code styling is preserved.
– Line wrapping is forcibly disabled.
This is a built-in lightweight alternative to syntax-highlighter libraries.
7. Custom Styles (CSS)
You can add any custom CSS to adjust:
Button design
Wrapper layout
Code spacing
Line number appearance
Usable Selectors (CSS) :
.copy-code-btn → The copy button
.copy-code-btn.copied → The button after Copying
.code-block-wrapper → Wrapper of the code block (position: relative)
.code-block-wrapper pre → Inner code text area (the
element)
.line-numbers → The container holding the line numbers
Example:
.copy-code-btn {
font-family: "Comic Sans MS", cursive;
font-weight: 700;
border: none;
}
Note: Do not include any comments.
Donate
If you find this plugin useful and would like to support its development,
you can make a voluntary donation via PayPal.
Your support helps keep this plugin maintained and improved.
Thank you!
PayPal: https://www.paypal.me/Kasuga16
延伸相關外掛
