Cara Membuat Syntax Highlighter di blog

Cara Membuat Syntax Highlighter di blog -

Fungsi

Fungsi dari Syntax Highlighter ini adalah untuk menampilkan teks terutama teks yang berupa kode dalam bentuk berbagai macam warna sesuai kode itu sendiri. Fitur syntax highlighter ini sangat cocok digunakan untuk kode pemrograman atau bahasa markup, karena akan lebih mudah dibaca terutama oleh kita.

Tetapi ini tergantung fungsi dari blog kalian misal blog kalian menampilkan kebanyakan tentang makanan, bukankah itu sangat tidak masuk akal ? makanan dengan bahasa pemrograman ?. oke kalian sudah tau fungsinya sekarang tinggal kalian menjalankannya saja. Biasanya kalian kalau menampilkan kode memakai Quote (<blockquote>..kode yang ingin ditampilkan..</blockquote>)  bukan ?, itupun hasilnya belum maksimal. nah kalau kalian memakai ini, kalian cukup menambahkan (<pre><code>..kode yang ingin ditampilkan..</code></pre>).

! Untuk demo bisa langsung dilihat disini karena kode akan ditampilkan disini !

Langkah Langkah

1. Login ke Aku Blogger/Google kalian

2. Masuk ke Dashboard Blogger kalian.

3. Klik Template => Edit HTML

klik untuk perbesar

4. Cari kode ini => ]]></b:skin>

5. Copy kode dibawah ini lalu Paste di atas kode ]]></b:skin>

/* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV52nX-4teEuAs6v_bj5EDOglMb2JbEjABlY2LYhtEh3OJ3X7VZ36FESSgow3th52wfHT0kzOmaq6t56nEeZaLKqzmaw44V4U0pDXgr98E8ga_vzxOO8nYHaB4hoHpmLJopDJnXnlurww/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}

6. Cari kode </head>
7. Copy kode dibawah ini, lalu Paste diatas kode </head>

<script src="http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js">
<script>
hljs.initHighlightingOnLoad();
</script>

8. Klik Simpan Template 

Cara Penggunaan

PERHATIAN!!

Sebelum menyisipkan kode Javascript, XHTML & HTML kecuali CSS harus di konversikan terlebih dahulu. Karena kalau tidak di konversikan, kode tidak akan muncul. Karena saya juga pernah mengalami hal tersebut. Untuk meng konversikan kode ada di page ini atau di page khusus <disini>

Gunakan kode di mode HTML saja jangan di mode Compose! Contoh yang salah

<pre><code>..pasang kode disini..</pre></code>

Contoh yang benar

<pre><code>..pasang kode disini..</code></pre>

Kalau ada yang ingin ditanyakan silahkan hubungi admin di :

Facebook : /khaleed.ibnalwaled

Twitter : /AHA_Khalid

Atau hubungi melalui komentar di postingan ini !

Baca Juga Postingan yang lain : Cara Membuat Scroll di Komentar Blog