Cara Membuat Syntax Highlighter Highlight.js With Copy To Clipboard Clipboard.js




Cara Membuat  Syntax Highlighter Highlight.js With Copy To Clipboard Clipboard.js
Cara Membuat  Syntax Highlighter Highlight.js With Copy To Clipboard Clipboard.js
Jika blog Anda mempunyai postingan blog membahas tentang kode-kode CSS, JS dan lainnya yang menyertakan tag pre code untuk menampilkan kode, dan jika anda ingin untuk mempercantik tampilannya anda harus menggunakan syntax highlighter. Nah salah satu syntax highlighter yang saya rekomendasikan adalah Highlight.js.
Highlight.js Ini selain cukup ringan juga bisa membaca secara otomatis bahasa kode sehingga mempermudah dalam penulisan tag pre code.

Jadi saya akan mencoba menggabungkan Highlight.js dengan Clipboard.js agar dapat mempermudah pengunjung dalam meng-copy kode HTML tersebut. Dengan Clipboard.js kita hanya tinggal meng-klik tombol copy yang akan muncul di pojok kanan atas syntax dan otomatis kode akan ter-copy to clipboard, Bagaimana cukup mudah bukan tinggal klik clipboard nya.

Selain itu script  defer js ini di buat  agar tidak akan membebani loading blog pada saat di akses.
Di bawah ini contoh demonya, bisa anda lihat video gif yang saya buat.

Nah jika anda memang berminat untuk mencobanya, maka silahkan anda ikuti langkah-langkah sebagai berikut ini:

 Syntax Highlighter Highlight.js With Copy To Clipboard Clipboard.js

  1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
  2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Anda Copas kode CSS di bawah ini dan paste di atas kode </head>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    /*<![CDATA[*/
    pre {
      position: relative;
      overflow: visible;
      display: block;
      padding: 0;
      white-space: initial;
      word-break: normal;
      word-wrap: normal;
      background: #eee;
      line-height: 20px!important;
      border: 0;
      border-radius: 0
    }
    
    pre code {
      white-space:initial;
    }
    mark,
    mark span {
      background-color: red!important;
      color: #fff!important
    }
    
    pre .btn {
      -webkit-transition: opacity 0.3s ease-in-out;
      -o-transition: opacity 0.3s ease-in-out;
      transition: opacity 0.3s ease-in-out;
      opacity: 0;
      padding: 2px 6px;
      position: absolute;
      right: 4px;
      top: 4px;
    }
    
    .btn {
      position: relative;
      display: inline-block;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: bold;
      line-height: 20px;
      color: #333;
      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;
    }
    
    code {
      font-family: Consolas, Monaco, "Andale Mono", monospace;
      white-space: initial;
      word-spacing: normal;
      word-break: normal;
      hyphens: none;
      color: #BC587E;
      font-size: 80%;
      padding: 0;
      vertical-align: 1px;
      font-style: normal!important
    }
    
    img.clippy {
      position: relative;
      vertical-align: middle;
      padding: 0;
      background: none;
      border: none;
      -moz-box-shadow: 0;
      -webkit-box-shadow: 0;
      box-shadow: 0;
    }
    
    pre:hover .btn {
      opacity: 1;
    }
    
    .tooltipped {
      position: relative
    }
    
    .tooltipped:after {
      position: absolute;
      z-index: 1000000;
      display: none;
      padding: 5px 8px;
      font: normal normal 11px/1.5 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
      color: #333;
      text-align: center;
      text-decoration: none;
      text-shadow: none;
      text-transform: none;
      letter-spacing: normal;
      word-wrap: break-word;
      white-space: pre;
      pointer-events: none;
      content: attr(aria-label);
      background: rgba(252, 252, 252, 0.8);
      border-radius: 3px;
      -webkit-font-smoothing: subpixel-antialiased
    }
    
    .tooltipped:before {
      position: absolute;
      z-index: 1000001;
      display: none;
      width: 0;
      height: 0;
      color: rgba(252, 252, 252, 0.8);
      pointer-events: none;
      content: "";
      border: 5px solid transparent
    }
    
    .tooltipped:hover:before,
    .tooltipped:hover:after,
    .tooltipped:active:before,
    .tooltipped:active:after,
    .tooltipped:focus:before,
    .tooltipped:focus:after {
      display: inline-block;
      text-decoration: none
    }
    
    .tooltipped-w:after {
      right: 100%;
      bottom: 50%;
      margin-right: 5px;
      -webkit-transform: translateY(50%);
      -ms-transform: translateY(50%);
      transform: translateY(50%)
    }
    
    .tooltipped-w:before {
      top: 50%;
      bottom: 50%;
      left: -5px;
      margin-top: -5px;
      border-left-color: rgba(252, 252, 252, 0.8)
    }
    
    .tooltipped-w:after {
      right: 100%;
      bottom: 50%;
      margin-right: 5px;
      -webkit-transform: translateY(50%);
      -ms-transform: translateY(50%);
      transform: translateY(50%)
    }
    
    .hljs {
      display: block;
      overflow-x: auto;
      padding: .5em;
      background: #333;
      color: #fff
    }
    
    .hljs-name,
    .hljs-strong {
      font-weight: 700
    }
    
    .hljs-code,
    .hljs-emphasis {
      font-style: italic
    }
    
    .hljs-tag {
      color: #62c8f3
    }
    
    .hljs-selector-class,
    .hljs-selector-id,
    .hljs-template-variable,
    .hljs-variable {
      color: #ade5fc
    }
    
    .hljs-bullet,
    .hljs-string {
      color: #a2fca2
    }
    
    .hljs-attribute,
    .hljs-built_in,
    .hljs-builtin-name,
    .hljs-quote,
    .hljs-section,
    .hljs-title,
    .hljs-type {
      color: #ffa
    }
    
    .hljs-bullet,
    .hljs-number,
    .hljs-symbol {
      color: #d36363
    }
    
    .hljs-keyword,
    .hljs-literal,
    .hljs-selector-tag {
      color: #fcc28c
    }
    
    .hljs-code,
    .hljs-comment,
    .hljs-deletion {
      color: #888
    }
    
    .hljs-link,
    .hljs-regexp {
      color: #c6b4f0
    }
    
    .hljs-meta {
      color: #fc9b9b
    }
    
    .hljs-deletion {
      background-color: #fc9b9b;
      color: #333
    }
    
    .hljs-addition {
      background-color: #a2fca2;
      color: #333
    }
    
    .hljs a {
      color: inherit
    }
    
    .hljs a:focus,
    .hljs a:hover {
      color: inherit;
      text-decoration: underline
    }
    /*]]>*/
    </style>
    </b:if>
  4. Selanjutnya silahkan anda simpan kode javascript di bawah ini di atas kode </body>
    <script>
    //<![CDATA[
    function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://firebasestorage.googleapis.com/v0/b/kompijs.appspot.com/o/JS%2Fhighlight2_copyclipboard.js?alt=media&token=96ca4e65-d9bc-46cd-a8bc-a0418381ac28",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
    //]]>
    </script>
  5. Nah jika anda ingin otomatis membaca tag <i rel="pre"> pada komentar blogger juga (threaded commants hack), Maka silahkan anda gunakan kode di bawah ini.
    <script>
    //<![CDATA[
    function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://firebasestorage.googleapis.com/v0/b/kompijs.appspot.com/o/JS%2Fhighlight_copyclipboard.js?alt=media&token=f41ff02b-29eb-495f-b006-6e31479d0e94",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
    //]]>
    </script>
  6. Jika sudah anda masukan semua kode, maka klik SAVE TEMPLATE
Cukup mudah bukan cara membuat nya. Demikian penjelasannya pada malam ini, semoga dapat bermanfaat untuk anda, selamat mencoba dan semoga berhasil ya kawan. 

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect