Ready to use awesome code boxes with copy button

We covered in a previous post how to add a block code with select and copy button, in this post I will share with you some ready to use code boxes with copy to clipboard button.,The selection of colors and style can be changed by the user with an inline CSS.

One thing you have to do before to use these codes is to link your blogger blog with font-awesome library to get the copy symbol in your button by adding the link bellow in the head element of your theme.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> 
Another thing is to connect your Blogger theme with google fonts to get the code font family, I used “Fira code” in this example, you can use other fonts if you want, add the bellow links in the head element of your theme: 
<link rel="preconnect" href="https://fonts.gstatic.com"/> 
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300" rel="stylesheet"/>

 Light gray code box:

Very basic color, it looks link this:

To use it add the following code in your blog post with the HTML editor mode:

<div style ="margin:10px; padding-left:10px;">
<textarea id="code-box"  rows="5" style ="width:90%; background:#f3f3f3; padding:5px;border:1px solid gray; font-family: 'Fira Code'; ">
  your code here
  your code here
  your code here
  your code here
  your code here 
  your code here 

</textarea>
<button style ="border: 1px solid gray;cursor: pointer;" onclick="document.getElementById('code-box').select();
document.execCommand('copy');">Copy to clipboard <i class="fa fa-copy"></i></button>
</div>


Green & White code box:

 This looks like W3schools site colors

To use it add the following code in your blog post with the HTML editor mode: 

<div style ="margin:5px; padding-left:10px;">
<textarea id="code-box2" rows="5" style ="width: 90%;background: #fff;padding:5px;border: 1px solid #3ac53a; border-left: 5px solid #3ac53a;font-family: 'Fira Code';">
  your code here
  your code here
  your code here
  your code here
  your code here
  your code here 
</textarea>
<button style ="background: #3ac53a;color: #fff;border: none;font-weight: bold;cursor: pointer;" onclick="document.getElementById('code-box2').select();
document.execCommand('copy');">Copy to clipboard <i class="fa fa-copy"></i></button>
</div>

Green with dark background code box:

 This is the progammer's choice:

To use it add the following code in your blog post with the HTML editor mode:

<div style ="margin:10px; padding-left:10px;">
<textarea id="code-box3"  rows="5" style ="width: 90%;background: #221e46;padding:5px ;border: none;  color: #03ff03;font-family: 'Fira Code';">
  your code here
  your code here
  your code here
  your code here
  your code here
  your code here  

</textarea>
<button style ="background: #fff;color: #221e46;border: 1px solid #221e46;font-weight: bold;cursor: pointer;" onclick="document.getElementById('code-box3').select();
document.execCommand('copy');">Copy to clipboard <i class="fa fa-copy"></i> </button>
</div>

I hope it was helpful, see you in the next tips.

 

Post a Comment (0)
Previous Post Next Post