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