Menambahkan Jquery Clipboard Pada Syntax Highlighter - Agiel Triono

Menambahkan Jquery Clipboard Pada Syntax Highlighter

Baca Juga
thumbs

Syntax Highlighter Memang berguna untuk memastikan pengunjung untuk tahu jenis kode apa yang sedang kita tulis dalam postingan kita. Mungkin dari sebagian kalian sudah tahu semua kegunaan Syntax Highlighter, Ya Syntax Highlighter Sekarang Sudah Banyak brand yang Di gunakan seperti Prism,Crayon,Highlight dan Masih Banyak Lagi. Dan Kini saya ingin berbagi tutorial bagaimana cara menambahkan Tombol Copy To Clipboard Button menggunakan JQUERY . Oke langsung saja .

Step 1
Buka draft.blogger.com lalu Edit HTML. Dan kita Tambahkan CSS di bawah ini sebelum tag </Head> .
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/* Clipboard Button */
.copycode{transition:all 200ms ease-in}
.copycode{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0}
.copycode{position:absolute;display:inline-block;padding:6px 12px;font-size:13px;font-weight:bold;line-height:20px;color:#333;opacity:0;right:8px;white-space:nowrap;vertical-align:middle;cursor:pointer;background-color:#eee;background-image:linear-gradient(#fcfcfc,#eee);border:1px solid #d5d5d5;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none}
.copycode:hover{background-color:#dcdcdc;background-image:none;border-color:#b5b5b5;box-shadow:inset 0 2px 4px rgba(0,0,0,0.15)}
/* use opacity:1; for more visible */
pre:hover .copycode{opacity:1}
</style>
</b:if>

Step 2
Letakan kode Di bawah sebelum tag </body> .
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
//<![CDATA[
// TO DO
$(document).ready(function() {
var e = $(".post-body pre code"),
      l = "<button class='copycode'>Copy</button>";
    e.before(l);
});
(function($){
$.fn.selectText = function(){
    var doc = document;
    var element = this[0];
    console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand("Copy");
    }
}
$.fn.removeRange = function(){
 if (window.getSelection) {
    if (window.getSelection().empty) {
            window.getSelection().empty();
      } else if (window.getSelection().removeAllRanges) {
            window.getSelection().removeAllRanges();
     }
    } else if (document.selection) {
           document.selection.empty();
  }
 }
})(jQuery);
$(document).ready(function() {
  $(".copycode").click(function() {
    var e = $(this).parent().find('code'),
        l = $(this),
        c ="Copied",
        d = l.text();
     e.selectText();
     l.html(c);
   setTimeout(function(){
     l.html(d);
   e.removeRange();
   },1000)
  });
});
//]]>
</script>
</b:if>

Lalu Save Template.
Nah sekarang coba lihat hasilnya.
oh iya untuk memastikan kode terpasang dengan benar , coba kalian buka postingan yang terdapat Syntax Highlighter.


Mohon maaf apabila ada kesalahan . kalian bisa memberikan feedback langsung kepada saya pada kolom komentar. Terima kasih

  • Untuk memasukan gambar silakan upload gambar pada komentar disqus.
  • Untuk memasukan link silahkan cantumkan link pada komentar tanpa menggunakan tag <a>.
  • Untuk menulis huruf bold silahkan gunakan <strong>...</strong> atau <b>...</b>.
  • Untuk menulis huruf italic silahkan gunakan <em>...</em> atau <i>...</i>.
  • Untuk menulis huruf underline silahkan gunakan <u>...</u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike>...</strike>.
  • Untuk menulis kutipan pendek gunakan <q>...</q>.
  • Untuk menulis kutipan panjang gunakan <blockqoute>...</blockqoute>.
  • Untuk menyembunyikan konten panjang gunakan <spoiler>...</spoiler>.
  • Untuk menulis syntax highlighter silahkan gunakan <pre><code>...</code></pre>, dan silahkan parse kode pada tab TOOLS.