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

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

Bola Hero Gawai

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

Syntax Highlighter Highlight.js With Copy To Clipboard Clipboard.js
Jika blog Anda memiliki artikel yang menyertakan tag pre code untuk menampilkan kode, maka untuk mempercantik tampilannya kita perlu menggunakan syntax highlighter. Salah satu syntax highlighter yang saya rekomendasikan yaitu Highlight.js.

Selain cukup ringan, Highlight.js juga dapat membaca secara otomatis bahasa kode sehingga mempermudah dalam penulisan tag pre code.

Dan kali ini saya mencoba menggabungkan Highlight.js dengan Clipboard.js untuk mempermudah pengunjung dalam meng-copy kode. 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, semakin mudah bukan?


Selain itu script ini saya buat dengan defer js sehingga tidak akan membebani loading blog.


Bagi yang ingin mencobanya, silahkan ikuti langkahnya di bawah ini.

Pasang kode CSS ini 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>

Kemudian silahkan 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>

Namun jika ingin otomatis membaca tag <i rel="pre"> pada komentar blogger juga (threaded commants hack), silahkan 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>

Selamat mencoba.......

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

4 Comments Add Comment

Maaf OOT kang Kompi..
apakah sangat rumit kang merubah tampilan HOME kompiflexi seperti tampilan HOME template kompiajaib sekarang, kalau ada waktu di buatkan tutorialnya ya kang :)
terimakasih kang

Balas

Hehehe iya mas :)

Balas

mas minta saran biar .post-thumb img bisa di klik, karena saat ini hanya
judul post nya saja yang bisa di klik untuk membuka postnya. Mkasih
mas.

blognya di delaphan*com mas

Balas

Tag pre code itu kodenya apa ya kang?
Di bagian html nya ditulis apa ?

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×