Cara Membuat Pre Double Click to Copy pada Tag Syntax Highlighter
Pasti banyak dari kalian yang ingin menyalin suatu object di sebuah website blog namun terus gagal karena layar yang tidak responsif atau memang kode terlaku panjang, maka dari itu codepelajar akan memberikan sebuah cara agar pengunjung blog dapat menyalin dengan menekan 2X tap saja untuk mendapatkan kode.
Apa itu Syntax Highlighter?
Syntax Highlighter adalah sebuah alat atau perangkat lunak yang digunakan untuk mempertegas atau menggambarkan sintaksis yang benar dalam sebuah kode pemrograman atau markup language. Tujuan utama dari Syntax Highlighter adalah untuk mempermudah pembacaan dan pemahaman kode yang ditulis oleh pengembang atau programmer.
Dalam dunia pengembangan perangkat lunak, ada banyak bahasa pemrograman yang berbeda, seperti JavaScript, Python, HTML, CSS, dan banyak lagi. Setiap bahasa memiliki sintaksis atau aturan penggunaan yang berbeda. Tanpa Syntax Highlighter, bisa sulit untuk membedakan antara elemen utama, variabel, fungsi, komen, dan bagian lain dari kode.
Tutorial Membuat Pre Double Click to Copy pada Tag Syntax Highlighter
/* Copy Code*/
.copyCode span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.copyCode span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.darkMode .copyCode span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
<div class='copyCode' id='cpCode'/>
<b:if cond='data:view.isPost'>
<script>/*<![CDATA[*/ for(var preClick=document.getElementsByTagName("pre"),i=0;i<preClick.length;i++)preClick[i].addEventListener("dblclick",function(){var e=getSelection(),o=document.createRange();o.selectNodeContents(this),e.removeAllRanges(),e.addRange(o),document.execCommand("copy"),e.removeAllRanges(),document.querySelector("#cpCode").innerHTML="<span><i class='clipboard'></i>Copied to clipboard!</span>"},!1); /*]]>*/</script>
</b:if>
<pre><code> ... </code></pre>