How to Make a Click to Copy in Syntax Highlighter - hyderabadrichest

How to Make a Click to Copy in Syntax Highlighter

How to Make a Click to Copy in Syntax Highlighter

Syntax highlighter is a container of script code so it doesn't get messy. In general, in the highlighter syntax there is a double click to selection feature, but it might be a bit complicated for blog visitors, or it doesn't even have that feature.

If by chance you have a blog that often shares tutorials, and contains source code. friend, you can install the highlighter syntax first to make it easier to follow this tutorial.So from now on, to make it easier for blog visitors, we will install clipboard.js.

So just click the copy to clipboard button, later the code in the highlighter syntax will be copied, with this blog visitors will not have to bother selecting and copying the code in the highlighter syntax.Please buddy, follow the tutorial to Make a Click to Copy in Syntax Highlighter carefully this, so that there are no errors.

How to Make a Click to Copy in Syntax Highlighter

Previously, we first installed the clipboard.js javascript so that the buttons could function.
Enter the Blogger dashboard, then go to Template => Edit HTML, you must have known.
then find the code  </body>  and add the code below right above it.
 <script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js'/>  
<script type='text/javascript'>
var clipboard = new ClipboardJS('.copytoclipboard');
</script>

Then buddy, look for the code again [[</b:skin  or  </style> and add this code, right above it.
 /* click to copy by hyderabadrichest.in */  
.copytoclipboard {
background-color: #eaeaea;
border: none;
color: #3e3e3e;
padding: 10px;
margin: auto;
border-radius: 4px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.04);
font-size: 16px;
cursor: pointer;
}
.copytoclipboard:hover {
background-color: #0e0e0e;
color: #fff;
}
when finished, then Save.

How to use Click to Copy in Syntax Highlighter

To use Click to Copy in the highlighter syntax is very easy, of course we use the button code as the caller.

how to copy the code below and place it under the Syntax Highlighter which contains code or whatever is in the highlighter syntax in blog posts, or pages that have highlighter syntax. the code:

 <div style="text-align: center;">  
<button class="copytoclipboard" data-clipboard-target="#code" style="text-align: center;">
<i class="fa fa-clipboard"></i>
</button>
</div>

Please remember!  if, you are going to use a large number of buttons or more than one, you have to change the code like the one I gave in red, please replace it, or add a number behind it, for example #code 1 and also after the <code> tag add the same id exactly with # code1, so complete like this <code id = "code1" >. So we just need to add id = "code1" right after the <code (here) > tag.

If you are still confused about wanting a simple one, just use it, I'll give the code as shown above.
 <pre><code ="code1">  
<!-- A CODE HTML CSS JAVASCRIPT --> syntax to 1
</code></pre>
<div style="text-align: center;">
<button class="copytoclipboard" data-clipboard-target="#kode1" style="text-align: center;">
<i class="fa fa-clipboard"></i>
</button>
</div>

Still confused? try to pay close attention and repeat from the beginning again, if you give up and still insist on installing the button or there is a problem, you can ask in the comments. or you can also contact me via the available contacts.

Making Click to Copy in Syntax Highlighter is a bit tricky too, but it will make blog visitors easier. Because the blogger's job is to present information that is clear and easy to access. hehehe

so many articles about How to Make Click to Copy at Syntax Highlighter this time. Hopefully this is useful for all. Thank you.

Show Comments
Hide Comments

0 Response to "How to Make a Click to Copy in Syntax Highlighter"

Post a comment

Top Ad Articles

Top Ad Articles

Top Ad Articles 2

Advertise Articles