Beranda
Blogger

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

1. Salin kode CSS ini, lalu tempelkan di atas kode ]]></b:skin> pada template
/* 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)}
2. Salin kode di bawah ini dan letakkan tepat di bawah kode <body>
<div class='copyCode' id='cpCode'/>
3. Salin JavaScript ini dan letakkan di atas kode </body>
<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>
4. Jika sudah silahkan simpan
5. Format penulisan kode
<pre><code> ... </code></pre>

Penutup

Untuk demo bisa  lihat sendiri pada Syntax Highlighter yang sudah disediakan di atas, cara ini hanya untuk blogger dan tidak dapat diterapkan pada wordpress maupun plartform lainnya.