Tutorial Membuat Syntax Highlighter di Blog

Assalamualaikum teman" :D

 

Syntax Highlighter adalah fitur editor teks yang menampilkan teks, terutama teks yang berupa kode dalam berbagai macam warna dan huruf yang berbeda sesuai dengan jenis kode itu sendiri. Fitur syntax highlighter sangat cocok digunakan untuk kode pemrograman atau bahasa markup karena akan lebih mudah dibaca terutama oleh manusia..

Terus cara buatnya gimana ? ,gampang kok :D ,oke ikutin aja langsung caranya :)

1.Login ke akun blogger anda masing-masing.

2.klik template > edit HTML

3.Cari kode ]]></b:skin> atau </style>

4.Copy kode css dibawah ini, lalu Paste diatas kode ]]></b:skin> atau </style>.

/* Syntax Highlighter by Alfarizi */

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/AVvXsEhqQCYncNdkiUqsNwSdaGyb4hkTfIqkUvPALMJAcME3Kq-H4Ime-MQEh-RepHVss_NiUIlmi_iSpMqwkfo2QXOzZ9dBeOLYtMNPhM5JR8zx5dmFeghsJjM8HQj7bmbo7PWI5L3nOm9oGd0/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}

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

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

7.Simpan Template

Terus Gimana Cara Menggunakan Syntax Highlighter di Blog ?

<pre><code>++++Masukan Kode Disini++++</code></pre>

Selesai :D
Kalo kurang jelas bisa langsung tanya di komentar :)

Oke sekian .wassalam.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Related Post