Cara Membuat Syntax Highlighter dengan Tombol Copy di Blogger

Arsipbiru.com - Syntax Highlighter merupakan text editor yang membungkus seluruh kode-kode markup di halaman web atau blog. Biasanya berisi kode HTML, CSS, JavaScript dan lain-lain.

Fitur tersebut sangat berguna untuk membedakan antara tulisan biasa dengan kode-kode markup di dalam sebuah artikel. Fitur tersebut sangat cocok diterapkan pada web atau blog dengan tema coding. Sehingga pengunjung dapat dengan mudah mengenali membedakan antara kode markup dengan tulisan biasa.

Umumnya fitur ini sudah ada di berbagai template Blogger. Sayangnya, fitur tersebut sebagian besar tidak dilengkapi dengan fitur copy untuk memudahkan menyalin barisan kode.

Nah, pada kesempatan kali ini, saya akan membagikan tutorial terkait bagaimana cara membuat syntax highlighter dengan tombol copy di Blogger. Silahkan Anda ikuti langkah-langkahnya berikut ini dengan seksama.

Cara Membuat Syntax Highlighter dengan Tombol Copy di Blogger

1. Pertama, masuk ke akun Blogger masing-masing.

2. Lalu, pilih tab menu Tema > Edit HTML.

3. Selanjutnya, cari kode ]]></b:skin> atau </style> dan masukkan kode CSS berikut ini di atas atau sebelum kode ]]></b:skin> atau </style>.

/* Syntax Highlighter UI Design by Rehatly.my.id */

.cBox{position:relative;background:#fff;width:100%;border-radius:9px;box-shadow:0 10px 40px rgba(0,0,0,.1);padding:20px;margin:30px 0 30px}

.cBox .cBoxH{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}

.cBox .cBoxH span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem}

.cBox .cBoxB{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#056aff;transition:all .3s ease;-webkit-transition:all .3s ease}

.cBox .cBoxB:hover{opacity:.8}

.cBox .cBoxB .icn{flex-shrink:0;display:inline-block;width:18px;height:18px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'/><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'/></svg>");background-size:cover;background-repeat:no-repeat;background-position:center}

.cBox .cBoxB.copied{background:#2dcda7}

.cBox .cBoxB.copied .icn{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'/><polyline points='23 3 12 14 9 11'/></svg>")}

.cBox pre{min-height:350px;margin:0;background:#f6f6f6;padding:15px;border-radius:5px;color:#08102b;font-size:.8rem;font-family:monospace;overflow:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}

.cBox pre::before, .cBox pre::after{content:''}

/* Toast Notification Setting */

.tNtf 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){.tNtf 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}}

/* Dark Mode Setting */

.drK .cBox{background:#2d2d30}

.drK .cBox pre{background:#252526;color:#fffdfc}

.drK .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}

4. Kemudian, cari kode <body> yang biasa terletak setelah kode </head>. Lalu, masukkan kode HTML berikut ini tepat di bawah kode <body>.

<!--[ Toast Notification ]-->

<div id='toastNotif' class='tNtf'></div>

5. Tahap berikutnya, masukkan kode JavaScript berikut ini di atas atau sebelum kode </body>.

<script>

/* Copy Button Script */

function copyC(e,t){var o=document.getElementById(e),n=document.getElementById(t),e=getSelection(),t=document.createRange();e.removeAllRanges(),t.selectNodeContents(n),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),o.classList.add("copied"),document.getElementById("toastNotif").innerHTML="<span>Script  Berhasil Disalin!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)}

</script>

6. Terakhir, klik Simpan Tema.

Cara Menggunakan Syntax Highlighter di Postingan Blog

<!--[ Script Box 1 ]-->

<div class='cBox'>

  <div class='cBoxH'>

    <!--[ Heading ]-->

    <span>HTML</span>

    <!--[ Copy Button ]-->

    <button id='copy1' class='cBoxB' onclick="copyC('copy1','code1')">

      <i class='icn'></i>

    </button>

  </div>

  <!--[ Content ]-->

  <div id='code1'>

    <pre>Taruh Kode HTML di sini...</pre>

  </div>

</div>

<!--[ Script Box 2 ]-->

<div class='cBox'>

  <div class='cBoxH'>

    <!--[ Heading ]-->

    <span>CSS</span>

    <!--[ Copy Button ]-->

    <button id='copy2' class='cBoxB' onclick="copyC('copy2','code2')">

      <i class='icn'></i>

    </button>

  </div>

  <!--[ Content ]-->

  <div id='code2'>

    <pre>Taruh Kode CSS di sini...</pre>

  </div>

</div>

<!--[ Script Box 3 ]-->

<div class='cBox'>

  <div class='cBoxH'>

    <!--[ Heading ]-->

    <span>JS</span>

    <!--[ Copy Button ]-->

    <button id='copy3' class='cBoxB' onclick="copyC('copy3','code3')">

      <i class='icn'></i>

    </button>

  </div>

  <!--[ Content ]-->

  <div id='code3'>

    <pre>Taruh Kode Javascript di sini...</pre>

  </div>

</div>

Cara Memasang Double Click to Copy pada Syntax Highlighter

<b:if cond='data:view.isSingleItem'>

  <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("#toastNotif").innerHTML="<span>Copied to clipboard!</span>"},!1); /*]]>*/</script>

</b:if>

3. Selanjutnya, tambahkan kode CSS berikut ini di atas atau sebelum kode ]]></b:skin> atau </style>.

/* CSS Toast Notification */

.tNtf 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){.tNtf 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}}

/* Dark Mode Setting */

.drK .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}

4. Kemudian, tambahkan kode HTML berikut ini tepat di bawah atau setelah kode <body>.

<!--[ Toast Notification ]-->

<div id='toastNotif' class='tNtf'></div>

5. Terakhir, klik simpan Tema dan lihat hasilnya.