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

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.


  • tooltipText string | Default value: ‘Copied’ – Text of the tooltip when the user clicks the copy button.
  • tooltipShowTime integer | Default value: 1000 – The time (in milliseconds) until the tooltip appears after the fade-in and before the fade-out.
  • tooltipFadeInTime integer | Default value: 300 – The fade in time (in milliseconds) until the tooltip appears.
  • tooltipFadeOutTime integer | Default value: 300 – The fade in time (in milliseconds) until the tooltip disappears,.

Must Read: Copy A Text String From An Input Element | angular-clipboard

How to make use of it:

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

<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.

<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

4. Initialize the plugin.


5. Default parameters.

  tooltipText: 'Copied',
  tooltipShowTime: 1000,
  tooltipFadeInTime: 300,
  tooltipFadeOutTime: 300

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.

Related Posts


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (,, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…


[Heatmap] Jquery Plugin for Display As a Graph of the Contribution on GitHub

Jquery plugin to present as a contribution graph on Github when viewing a user profile, you can use it to apply to other JS frameworks like Angularjs as…


A Customizable Calendar JavaScript UI Widget/Component Library

Color Calendar is a customizable event calendar component library. Flexible, customizable, and themed events calendar and month/year picker component written in Vanilla JavaScript. Features Zero dependencies Add…


Animated Calendar UI Design Using HTML CSS JavaScript

Calendar UI design with dark mode and animations using HTML CSS JavaScript. An elegant, animated, and lightweight (or bold) calendar user interface design implemented in HTML, JS,…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…

Leave a Reply

Your email address will not be published. Required fields are marked *