Cara untuk membuat kode berwarna di website kali ini akan kita bahas.. Tutorial kali ini kita akan Membuat Syntax Highlighter Untuk Website / Blogspot / Wordpress dengan CSS saja..  ada yang belum tahu apa itu syntax highlighter.. ????? OK.. saya jelaskan secara singkat apa yang dimaksud dengan syntax highlighter.

" Syntax Highlighter merupakan sebuah tampilan website yang digunakan untuk menandai khusus pada bagian baris kode , yang dapat berupa kotak kode, warna kode , atau penomoran pada kode layaknya sebuah text editor yang digunakan untuk menulis baris script di komputer. misalnya Notepad ++ , Sublime Text atau yang lainnya. "

Ini dapat anda terapkan pada blogspot, wordpress , atau website PHP MYSQL , tergantung pada platform yang digunakan , sesuaikan dalam peletakkan kode CSS nya saja.

Dalam membuat tampilan syntax highlighter di website  ini :

pre, code {
overflow: auto; 
width: 90%;                          /* specify width  */
white-space: pre-wrap;                 /* CSS3 browsers  */
white-space: -moz-pre-wrap !important; /* 1999+ Mozilla  */
white-space: -pre-wrap;                /* Opera 4 thru 6 */
white-space: -o-pre-wrap;              /* Opera 7 and up */
word-wrap: break-word;                 /* IE 5.5+ and up */
/* overflow-x: auto; */                /* Firefox 2 only */
/* width: 95%; */               /* only if needed */
border-left:10px solid #F5D995;
border-right:1px solid #F5D995;
border-top: 1px solid #F5D995;
border-bottom:1px solid #F5D995;
padding-left:8px;
color : #3F3B36;
background: #FDFDFD;
background-image: -webkit-linear-gradient(#EEEEEE 50%, #FDFDFD 50%);
background-image:    -moz-linear-gradient(#EEEEEE 50%, #FDFDFD 50%);
background-image:     -ms-linear-gradient(#EEEEEE 50%, #FDFDFD 50%);
background-image:      -o-linear-gradient(#EEEEEE 50%, #FDFDFD 50%);
background-image:         linear-gradient(#EEEEEE 50%, #FDFDFD 50%);
background-position: 0 0;
background-repeat: repeat;
background-size: 3.5em 3.5em;
padding:0em 1em;
}

Tempatkan kode CSS diatas untuk style pada Tag pre di website anda .. sehingga kita bisa menggunakan nya di website dengan cara : 

<pre>

... letakkan kode yang ingin ditampilkan di website...

</pre>

Nah.. silahkan anda coba.. semoga artikel Cara Membuat Syntax Highligter ini dapat bermanfaat untuk kita semua.

UPDATE New SyntaxHighligter Style :

Bagi Teman-Teman yang ingin membuat syntaxhighligter di website keren dengan bermacam-macam Theme , bisa dilihat pada artikel DISINI