Tutorial Membuat Blog dengan Hugo di Android

Deuxly: Membuat Tombol Copy Code di Syntax Highlighter blogger. Jika kalian liat di artikel blog ini yang terdapat kode di dalam syntax highlighter pasti terdapat tombol untuk mencopy keseluruhan kode hanya dengan sekali klik.

Nah, dikesempatan ini saya akan membagikan bagaimana Cara Membuat Tombol Copy Code di Syntax Highlighter Blogger.

Umumnya membuat syntax highlighter di Blogspot itu menggunakan<pre><code></code></pre> tetapi tidak menutup kemungkinan untuk membuat syntax dengan tag <div>

yang mana sebenarnya bisa menggunakan tag apa saja sesuai dengan css nya.

Diartikel ini, saya akan memberikan Tutorial Blogger membuat tombol copy code pada syntax highlighter.

Artikel ini tidak membahas Cara Membuat Syntax Highlighter di blogger tetapi, hanya membahas bagaimana Cara Membuat Tombol Copy Code di Syntax Highlighter, saya asumsikan kalian udah ngebuat syntax highlight di template blog dan tinggal menambahkan tombol copy code nya saja.

Membuat Tombol Copy Button Pre Code

Langkah pertama untuk membuat tombol copy code yaitu login terlebih dulu ke blogger kemudian klik menu Tema/Template > Edit HTML kemudian copy seluruh kode css dibawah dan paste kode tersebut tepat berada di atas kode ]]></b:skin> atau bisa di atas kode </style>.

.preCopy:hover{opacity:1}

.preCopy{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-user-select:none;opacity:.5;transition: opacity linear 0.5s;position:absolute;right:0;z-index:2;top:0;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><g><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'></rect><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'></path></g></svg>") 40px / 15px no-repeat;background-color:#d9d9d9;color:#989b9f;border:none;font-size:10px;line-height:2.2em;border-radius:0 4px 0 4px;padding:5px 29px 5px 8px}

.preCopy.copyed{background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBmb2N1c2FibGU9ImZhbHNlIiBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImNoZWNrIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hlY2sgZmEtdy0xNiIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9IiYjMTA7ICAgIGNvbG9yOiAjMmFmZjMyOyYjMTA7Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNzMuODk4IDQzOS40MDRsLTE2Ni40LTE2Ni40Yy05Ljk5Ny05Ljk5Ny05Ljk5Ny0yNi4yMDYgMC0zNi4yMDRsMzYuMjAzLTM2LjIwNGM5Ljk5Ny05Ljk5OCAyNi4yMDctOS45OTggMzYuMjA0IDBMMTkyIDMxMi42OSA0MzIuMDk1IDcyLjU5NmM5Ljk5Ny05Ljk5NyAyNi4yMDctOS45OTcgMzYuMjA0IDBsMzYuMjAzIDM2LjIwNGM5Ljk5NyA5Ljk5NyA5Ljk5NyAyNi4yMDYgMCAzNi4yMDRsLTI5NC40IDI5NC40MDFjLTkuOTk4IDkuOTk3LTI2LjIwNyA5Ljk5Ny0zNi4yMDQtLjAwMXoiLz48L3N2Zz4=') 50px / 15px no-repeat;background-color:#d9d9d9;border:none;font-size:10px;line-height:2.2em;border-radius:0 4px 0 4px;padding:5px 29px 5px 8px}

Setelah meletakkan kode css di atas lanjut dengan meletakkan kode Javascript di bawah tepat berada di atas </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script>/*<![CDATA[*/

let preTag = document.querySelectorAll("pre");

async function copyCode(e) {

    const t = e.srcElement;

    t.innerText = "Copyed";

    let o = t.parentElement.querySelector("code").innerText;

    await navigator.clipboard.writeText(o), t.classList.add("copyed"), setTimeout((() => {

        t.classList.remove("copyed"), t.innerText = "Copy"

    }), 1e3)

}

preTag.forEach((e => {

    if (navigator.clipboard) {

        let t = document.createElement("button");

        t.classList.add("preCopy"), t.innerText = "Copy", t.addEventListener("click", copyCode), e.appendChild(t)

    }

}));

/*]]>*/</script>

Kita udah berhasil Membuat Tombol Copy Code di Syntax Highlighter

Kesimpulan

Menambahkan Copy Button di Syntax hanya perlu menambahkan sedikit script css dan javascript agar tombol nya bisa berfungsi.