Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat Double Click to Copy pada Tag Pre Syntax Highlighter

Membuat Copy Code pada Tag Pre

Tutorial ini di request oleh 72Lite.com, yaitu bagaimana Cara Membuat Double Click to Copy pada Tag Pre Syntax Highlighter, untuk DEMO seperti code-code yang saya tulis di bawah.

Untuk tutorial ini, JavaScript yang saya gunakan dari fineshopdesign.com dan kustomisasi CSS dari Median UI

Membuat Double Click untuk Meng-copy Code

1. Simpan kode CSS ini, biasanya di atas ]]></b:skin>

/* 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. Simpan kode ini di bawah <body>

<div class='copyCode' id='cpCode'/>

3. Simpan JavaScript ini di atas </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. Selesai. Sampai sini kode sudah bisa di Double Click, silahkan dicoba pada halaman demo.

Demo

Kustomisasi CSS

Apabila ingin seperti Blog ini teks muncul saat hover, tambahkan CSS ini. (Supaya tidak bentrok CSS, hapus CSS yang berkaitan dengan code dan pre pada template).

/* Font: Source code, Fira Mono(Latin) by Google */ 
@font-face {font-family:'Fira Mono'; font-style:normal;font-weight:400;font-display:swap; src:url(https://fonts.gstatic.com/s/firamono/v14/N0bX2SlFPv1weGeLZDtgJv7S.woff2) format('woff2';), url(https://fonts.gstatic.com/s/firamono/v14/N0bX2SlFPv1weGeLZDtQIg.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Syntax */ 
pre{background:#f6f6f6;color:#2f3337; direction: ltr;position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto;font-family:'Fira Mono', Consolas,Monaco,Lucida Console;display:block;font-size:13px;border-radius:3px;padding:35px 20px 20px; -moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none; overflow:auto;direction:ltr;white-space:pre} 
code{display:inline;padding:5px;font-size:13px;border-radius:3px;line-height:inherit;color:#2f3337;background:#f2f3f5;font-family:';Fira Mono', Consolas,Monaco,Lucida Console;}
pre code{background:none;padding:0;display:block;padding:0.5em;overflow-x:auto}
pre::before{content:'</>';display:flex;justify-content:flex-end;position:absolute;right:0;top:0;width:100%;background:inherit;color:#656e77;font-size:10px;padding:0 10px;z-index:2;line-height:30px} 
pre.html::before{content:'.html'} 
pre.css::before{content:'.css'} 
pre.js::before{content:'.js'} 
pre.xml::before{content:'.xml';}     
pre:hover::before{content:'Double click to copy | </>'} 
pre.html:hover::before{content:'Double click to copy | .html'} 
pre.css:hover::before{content:'Double click to copy | .css'} 
pre.js:hover::before{content:'Double click to copy | .js'} 
pre.xml:hover::before{content:'Double click to copy | .xml'}  

Hasil Kostumisasi silahkan lihat pada blog demo.

Demo dengan CSS

Format Penulisan Kode

Untuk format penulisan supaya sesuai dengan CSS di atas, formatnya seperti ini

<pre><code> ... </code></pre>

Tambahkan class pada pre, untuk menyesuaikan dengan kode. Contoh <pre class="css">. Yang tersedia adalah css, html, xml dan js.

Manual Syntax Highlighter

Apabila ingin menambahkan pewarnaan pada kode (highlight), tambahkan CSS ini

/* HLJS */
.hljs-comment, .hljs-code, .hljs-meta, pre i.gray{color:#656e77}
.hljs-name, .hljs-title, .hljs-bullet, .hljs-variable, .hljs-template-variable, .hljs-selector-id, .hljs-selector-class, .hljs-selector-tag, .hljs-literal, pre i.red{color:#b75501} 
.hljs-keyword, .hljs-string, .hljs-type, .hljs-section, .hljs-quote, .hljs-built_in, .hljs-builtin-name, pre i.blue{color:#015692} 
.hljs-attribute{} .hljs-params, pre i.green{color:#54790d } 
.hljs-number, .hljs-symbol{color:#f15a5a } 
.hljs-regexp, .hljs-link{color:#72621d } 
.hljs-deletion{background-color:#fef5fa;color:#e51661} 
.hljs-addition{background-color:#e8f0fe;color:#272eb5} .hljs-strong{font-weight:bold}
.hljs-code, .hljs-emphasis{font-style:italic}

Gunakan HLJS Parse Tool untuk memparse kode

Semoga bermanfaat

16 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Terima kasih sudah dibuatkan tutorialnya kang.

    Saya sudah coba pasang di blog saya. Untuk fungsi double click to copy sudah berfungsi.

    Tapi untuk tampilannya tidak berubah.

    Semua code yg berhubungan dengan syntax highlighter sudah saya hapus dan saya ganti seperti yg di tutorial. Tapi tampilan tidak sesuai.

    Bisa di cek kang

    <i rel='pre'>https://www.72lite.com/2023/02/membuat.halaman.sitemap.blogger.html?m=1</i>
    1. Terus tulisan double click to copy di syntax highlighter nya gak muncul kang
    2. ini masalahnya di format penulisan kode, karena basicnya Median UI maka penulisannya <div class="pre html">
      <pre> ..... </pre>
      </div>
      untuk yang terlanjur penulisan
      <pre><code>....</code></pre> nanti saya update artikelnya
    3. Oke kang ditunggu solusinya
    4. Kalo untuk warna tulisan di syntax nya kok gak berubah ya kang? Kira kira apa yg salah ya?
    5. CSS sudah saya perbaharui, silahkan di edit mas. Kalau ingin merubah warna tulisan, ketika membuat kode harus di parse dengan HLJS Parse. Kalau sudah terlanjur (misal tutorial yang sudah lama), maka solusi dengan Highlight.js, tutorial : https://www.kang-ismet.com/2013/05/highlightjs-syntaxhighlighter-untuk.html
    6. Syntax nya ketika di geser kesamping, tulisan fouble click to copynya ngikut kang.

      Perlu ditambahkan sedikit css begini

      .hljs{display:block;overflow-x:auto;padding:0.5em;}

      Oh iya, Ditempat saya. Agar warna dari hjls nya berjalan. Harus tambahakan sedikit script di atas penutup body.

      <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js' type='text/javascript'/>
      <script type='text/javascript'>
      //<![CDATA[
      hljs.initHighlightingOnLoad();hljs.configure({useBR:false});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
      //]]>
      </script>
    7. oh iya ada yang lupa, tapi bukan di .hljs tapi di pre code, emang kalau menggunakan script Highlight.js kaya gitu mas. Beda dengan HLJS parse, itu penambahan class saja tanpa script..
  2. Bukannya di median uin sudah ada ya bawaan tema nya
    1. kan di template lain ga ada mas..
    2. Aku ambil yang modifikasi mas scriptnya di template median ui
  3. mantap kang, hehe btw ini pake plugin js copytoclipboard nggak kang
    1. ngga mas, lebih simple sebenrernya ini pake execCommand()
  4. Untuk wordpress ada kang?
    1. kalau WP kan pake plugin saya kurang paham mas, tapi kalau add manual bisa ko, saya sudh coba di template bootstrap
  5. Terima kasih kang, izin pakai kodenya.

    Sudah diterapkan di blog.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.