Adding the code embed box with the copy button in Blogger
Adding a code embedding box in multiple programming languages and forms on Blogger, and an explanation of how to install a code embedding box on Blogger.
After this long absence from the introduction of a new blogger tool, create an attractive syntax highlighter code box. The good thing about this tool for those who do not know it is the ability to code within Blogger themes differently and in different colors, depending on the codes and the language they represent, In this article I will not only use the normal code box, but I will add a box with a copy button to copy all the codes.
Add code embed box with copy button in blogger
- Before we start make sure that the .post-body pre code and .post-body pre code are not present in the CSS codes of the theme because there are no conflicts.
- Now put the following codes under the CSS tag
- Now search for the <head> tag and place the following code directly above it
- Now the code embedding box has been added in Blogger and it is ready for use
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300" rel="stylesheet"/>
Use code box in blogger
- To add the code box in blogger posts, all you have to do is follow the following codes according to your usage
- If you want to display the HTML code, the format is as follows.
<div class="codeBlockCopy" >
<form>
<textarea dir="ltr" id="mytext" rows="5">
Your code here
</textarea>
</form>
<button onclick="document.getElementById('mytext').select();
document.execCommand('copy');">نسخ الكل <i class="fa fa-copy"></i></button>
</div>
- Note: Before adding the code in the editor when creating a post, you must first convert the code so as not to damage the appearance of the post.
To convert the code, use the converter we use at wordpress hosting - Good Twins - Automatic HTML Converter
If there is a problem with the installation of the box, please leave your comment and we will help you install the box.
