This time I will share jQuery Plugin and tutorial about Copy Code To Clipboard Plugin For Syntax Highlighter, hope it will help you in programming stack.
Code Box Copy is a jQuery plugin for the popular Prism syntax highlighter that allows you to copy the content within the code box to clipboard with a customizable copy button.
How to use it:
1. Load the needed jQuery library, Prism.js and clipboard.js in your html document.
1 |
<link href="/path/to/prism.min.css" rel="stylesheet"> |
2 |
<script src="/path/to/jquery.min.js"></script> |
3 |
<script src="/path/to/prism.min.js"></script> |
4 |
<script src="/path/to/clipboard.min.js"></script> |
2. Load the jQuery Code Box Copy’s files in the document.
1 |
<link href="code-box-copy.css" rel="stylesheet"> |
2 |
<script src="code-box-copy.js"></script> |
3. Create the content you want to copy.
1 |
<div class="code-box-copy"> |
2 |
<button class="code-box-copy__btn" data-clipboard-target="#example-html" title="Copy"></button> |
3 |
<pre><code class="language-html" id="example-html"><div class="example"> |
5 |
</div></code></pre> |
4. Initialize the plugin and done.
1 |
$('.code-box-copy').codeBoxCopy(); |
5. Default parameters.
- tooltipText {string}: text of the tooltip when the user click to the copy button
- tooltipShowTime {number}: the time (in milliseconds) until the tooltip appears after fade in and before the fade out
- tooltipFadeInTime {number}: the fade in time (in milliseconds) until the tooltip appears
- tooltipFadeOutTime {number}: the fade in time (in milliseconds) until the tooltip disappears
1 |
$('.code-box-copy').codeBoxCopy({ |
4 |
tooltipFadeInTime: 300, |
5 |
tooltipFadeOutTime: 300 |
Changelog:
2020-08-10
This awesome jQuery plugin is developed by jablonczay. For more Advanced Usages, please check the demo page or visit the official website.
