Membuat Double Click to Copy pada Tag Pre Syntax Highlighter
Kang Ismet
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.
DemoKustomisasi 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 CSSFormat 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
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>
Terus tulisan double click to copy di syntax highlighter nya gak muncul kang
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
Oke kang ditunggu solusinya
Kalo untuk warna tulisan di syntax nya kok gak berubah ya kang? Kira kira apa yg salah ya?
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
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>
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..
Bukannya di median uin sudah ada ya bawaan tema nya
kan di template lain ga ada mas..
Aku ambil yang modifikasi mas scriptnya di template median ui
mantap kang, hehe btw ini pake plugin js copytoclipboard nggak kang
ngga mas, lebih simple sebenrernya ini pake execCommand()
Untuk wordpress ada kang?
kalau WP kan pake plugin saya kurang paham mas, tapi kalau add manual bisa ko, saya sudh coba di template bootstrap
Terima kasih kang, izin pakai kodenya.
Sudah diterapkan di blog.