Membuat Syntax Highlighter Pada Blogspot

Codepelajar – Syntax highlighter adalah fitur yang dapat mewarnai atau menyorot kode secara visual, membantu programmer mengenali dan memahami kode dengan lebih baik.

Pentingnya syntax highlighter terutama terlihat saat bekerja dengan bahasa pemrograman yang kompleks dan memiliki banyak aturan tata bahasa. Dalam bahasa seperti C++, Java, atau Python, kode biasanya panjang dan terdiri dari banyak elemen seperti variabel, fungsi, atau pernyataan. Tanpa syntax highlighter, sulit untuk membedakan satu elemen dari yang lain. Namun, dengan menggunakan syntax highlighter, beberapa bagian kode dapat ditampilkan dengan warna yang berbeda atau diberi penekanan, membuatnya lebih mudah untuk dibaca.

Manfaat utama syntax highlighter adalah menjadikan kode lebih mudah dipahami. Konteks penting seperti sintaksis, variabel, atau komentar ditampilkan dengan warna yang berbeda. Misalnya, variabel dapat diwarnai hijau, fungsi dapat diberikan warna biru, dan komentar dapat ditampilkan dalam huruf miring. Dengan adanya pengaturan ini, kode menjadi lebih mudah dibaca dan dipahami oleh programmer, terutama saat harus melihat kode yang panjang atau kompleks.

Cara Membuat Syntax Highlighter Dengan Tombol Copy

Silahkan masuk ke blogspot themes > edit html copy css di bawah ini dan paste di atas kode ]]></b:skin> atau 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}

Silahkan salin kode JavaScript dibawah ini dan tempatkan diatas kode </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>

Untuk pemanggilnya kalian dapat memasang kode <pre><code>kode kamu</code></pre> pada postingan dengan bentuk HTML.

Oke mungkin segitu saja untuk tutotial kali ini semoga bermanfaat dan terimakasih sudah mengunjungi blog Codepelajar.