Memasang Syntax Highlighter Untuk Pre Code

Gambar by Ficri Pebriana

Saya sudah keliling-keliling mbah google, dan baru ketemu cara memasang Syntax Highlighter di blogger ini dengan cara yang lebih simpel. Karena apa..? Karena tidak perlunya kita menentukan class pada setiap kode yang kita masukkan di blog.

Lagian pula terlalu banyak sudah kode yang saya gunakan pada artikel-artikel saya yang lainnya. Dan saya males untuk mengeditnya satu persatu. Makanya saya mencari alternatifnya dengan hanya mengandalkan tag pre dan code, atau biasa ditulis seperti berikut.

 <pre><code> Kode css, html, javascript, jquery atau yang lainnya </code></pre> 

atau bisa juga seperti ini hasilnya.

.smoothscroll-top {
  position:fixed;
  opacity:0;
  visibility:hidden;
  overflow:hidden;
  text-align:center;
  z-index:99;
  background-color:#09c;
  color:#fff;
  width:47px;
  height:44px;
  line-height:44px;
  right:25px;
  bottom:-25px;
  padding-top:2px;
  border-radius:none;
  transition:all 0.5s ease-in-out;
  transition-delay:0.2s;
}

.smoothscroll-top:hover {
  background-color:#3eb2ea;
  color:#fff;
  transition:all 0.2s ease-in-out;
  transition-delay:0s;
}

.smoothscroll-top.show {
  visibility:visible;
  cursor:pointer;
  opacity:1;
  bottom:25px;
}

.smoothscroll-top i.fa {
  line-height:inherit;
}

Itu sekalian sebagai contoh aja sobat, semua kode akan bewarna khusus, nah ini menjadi lebih terlihat profesional dan keren kan. Untuk sobat blogger yang menginginkannya, caranya cukup mudah. Sobat ikuti tutorial singkat berikut ini.

Tambahkan css berikut ini tepat diatas kode </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Syntax Highlighter */
pre,i[rel="pre"] {
  padding:.8em 1em;
  margin:0;
  background-color:#2f3741;
  border-left:4px solid #40627E;
  font-size:11px;
  color:#839496;
  font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
  line-height:1.4em;
  position:relative;
  white-space:pre;
  word-wrap:normal;
  white-space:pre;
  overflow:auto;
}

pre.line-number {
  background:#2f3741 url(http://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/s1600/new-line-number.png)no-repeat top left;
  padding-left:54px;
  border-left:none;
}

pre.line-number:after {
  content:"";
  width:35px;
  height:8px;
  background-color:#39424e;
  bottom:0;
  left:0;
  position:absolute;
}

pre[data-codetype="CSS"] {
  border-left-color:#5fbbba;
}

pre[data-codetype="HTML"] {
  border-left-color:#4fc1eb;
}

pre[data-codetype="JavaScript"] {
  border-left-color:#ff6c60;
}

pre[data-codetype="JQuery"] {
  border-left-color:#99c262;
}

pre.line-number[data-codetype]:before {
  content:attr(data-codetype);
  display:block;
  margin:-11px -13px 10px -54px;
  padding:8px 12px;
  font-family:Oswald,Arial,Sans-serif;
  font-size:12px;
  text-transform:uppercase;
  background-color:#41749f;
  color:white;
}

pre.line-number[data-codetype="CSS"]:before {
  background-color:#a9d86e;
}

pre.line-number[data-codetype="HTML"]:before {
  background-color:#4fc1eb;
}

pre.line-number[data-codetype="JavaScript"]:before {
  background-color:#ff6c60;
}

pre.line-number[data-codetype="JQuery"]:before {
  background-color:#99c262;
}

code {
  font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
  font-size:13px;
  color:#d14;
}

#comments code {
  color:#bbbb6d;
}

pre code {
  padding:0 !important;
  color:#a3a49a;
  background:none !important;
  border:none !important;
  display:block;
}

pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  color:#61686d;
  background-color:#39424e;
  text-align:right;
  min-width:2.5em;
  padding-right:4px;
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
  color:#2DCFF2;
  font-style:italic;
}

pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
  color:#E6D90C;
}

pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .rules .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color:#EB4F4F;
}

pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
  color:#03C425;
}

pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color:#1B6FC3;
}

pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title,
pre .css .pseudo {
  color:#D94CEA;
}

pre .deletion {
  color:#dc322f;
}

pre .tex .formula {
  background:#073642;
}
</style>
</b:if>

Kode CSS tersebut telah saya sesuaikan agar hanya terpanggil ketika dalam posting, jadi akan mengurangi beban blog sobat, terutama dalam hompagenya. Selanjutnya tambahkan kode dibawah ini tepat dibawah </body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>
</b:if>

Setelah itu Simpan Template dan lihat semua kode yang telah sobat tentukan dengan tag pre dan code pasti akan memiliki warna-warna yang menarik, dan terlihat profesional kan sobat.

Karena google code sudah akan ditutup pada 2016, maka saya berikan alternatif js nya, dengan mengganti kode yang terakhir tadi dengan kode dibawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://googledrive.com/host/0B_ljWXOPMwNGfkQ3MHVzcFZNN0tXSXNEb2FjQmJ2cHZ1N1BwSHlKbG8xUTg4dmpzSEN0bEU/Syntax.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>
</b:if>

Semoga bermanfaat. Jika ada yang bingung sobat bisa komentar yah. O ya, tuh kode-kode saya dapatkan di blog kang Ficri Pebriana, ini alamat artikelnya. Terima kasih telah berbagi dan saya temukan di google. Kode-kode diatas sudah saya sesuaikan agar hanya terload pada postingan, sehingga tidak menambah beban homepage. :)