Copy Code to Clipboard Plugin in Order to Highlight Syntax | Code Box Copy

Copy-Code-to-Clipboard-Plugin

Copy Code To Clipboard PluginCode Box Copy is a lightweight and flexible jQuery syntax plugin that provides an easy-to-use and simple way to copy any text to the clipboard with one click.

This jQuery plugin for the favored Prism syntax highlighter means that you can copy the content material inside the code field to the clipboard with a customizable copy button.

How to Make Use of it

1. Load the wanted jQuery library, Prism.js, and clipboard.js in your HTML doc.

<link href="/path/to/prism.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/prism.min.js"></script>
<script src="/path/to/clipboard.min.js"></script>

2. Load the jQuery Code Box Copy files within the doc.

<link href="code-box-copy.css" rel="stylesheet">
<script src="code-box-copy.js"></script>

3. Create the content you need to copy – Copy to Clipboard jQuery.

<div class="code-box-copy">
  <button class="code-box-copy__btn" data-clipboard-target="#example-html" title="Copy"></button>
  <pre><code class="language-html" id="example-html">&lt;div class=&quot;example&quot;&gt;
      Lorem ipsum
  &lt;/div&gt;</code></pre>
</div>

4. Initialize the plugin and carried out.

$('.code-box-copy').codeBoxCopy();

5. Default parameters.

  • tooltipText {string}: textual content of the tooltip when the consumer clicks on the copy button
  • tooltipShowTime :┬áthe time (in milliseconds) till the tooltip seems after fade in and earlier than the fade out
  • tooltipFadeInTime : the fade-in time (in milliseconds) till the tooltip seems
  • tooltipFadeOutTime : ┬áthe fade-in time (in milliseconds) till the tooltip disappears
$('.code-box-copy').codeBoxCopy({
  tooltipText: 'Copied',
  tooltipShowTime: 1000,
  tooltipFadeInTime: 300,
  tooltipFadeOutTime: 300
});

Copy HTML Code to Clipboard Javascript, Copy Text to Clipboard jQuery, Copy Code to Clipboard jQuery, copy to clipboard button, copy to clipboard jquery, react copy to clipboard


See Demo And Download

Official Website(jablonczay): Click Here

This superior jQuery/javascript plugin is developed by jablonczay. For extra advanced usage, please go to the official website.