Making a Code Block with copy to clipboard system in PHP, CSS

To create a code block with a copy-to-clipboard system using PHP and CSS, you can follow these steps:

1. HTML Markup: Start by creating the HTML structure for your code block and the copy button. Add an empty <pre> or <code> element to hold the code and a button element for copying.

<div class="code-block">
  <pre><code><?php echo htmlspecialchars($yourCode); ?></code></pre>
  <button class="copy-button" data-clipboard-target="#code">Copy</button>
</div>

2. CSS Styling: Apply CSS styles to format and style the code block and copy button as desired. You can customize the styles based on your preferences.

.code-block {
  position: relative;
}

pre {
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 14px;
  line-height: 1.4;
}

.copy-button {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #ddd;
  border: none;
  cursor: pointer;
}

3. JavaScript and Clipboard.js: To enable the copy functionality, you can use the Clipboard.js library. Include the library and initialize it in your JavaScript code.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script>
  var clipboard = new ClipboardJS('.copy-button');

  clipboard.on('success', function(e) {
    e.clearSelection();
    alert('Code copied to clipboard!');
  });

  clipboard.on('error', function(e) {
    alert('Unable to copy code. Please select and copy manually.');
  });
</script>

Ensure that you include the Clipboard.js library before your custom JavaScript code.

4. PHP Variable: Replace $yourCode in the HTML markup with the actual PHP variable containing the code that you want to display in the code block. Similarly, replace $copyButtonText the desired text for the copy button.

Ensure that you have the actual PHP code or variables defined before generating the HTML markup.

That’s it! With these steps, you can create a code block with a copy-to-clipboard system using PHP, CSS, and JavaScript with the help of the Clipboard.js library.

Examples:

See the Pen
Copy to Clipboard by Rasel ahmed (@devrasel)
on CodePen.

See the Pen
Copy To Clipboard by Rasel ahmed (@devrasel)
on CodePen.