Cara Membuat Kotak Script / Syntax Highligheter di blog

Cara Membuat Syntax Highlighter (Kotak Script) - Halo sobat blogger kali ini saya mau share cara buat kotak script / syntax highlighter pada blog, kotak script ini akan sangat berguna bagi kita disaat kita mau posting code script pada blog kita, kenapa harus menggunakan cara ini?

kalau kita gak menaruh script code didalam kotak ini maka postingan kita akan sedikit berantakan dan kurang bagus, kotak ini berfungsi sebagai rumah bagi scrip code yang kita letakan di postingan.

Syntax Highlighter ini di kembangkan oleh Alex Gorbatchev, dan bagi kalian yang berminat untuk menambahkan script dan membuatnya tampil di posting anda, silahkan ikuti tutorialnya.

syntax highlighter

Berikut Cara Membuat Syntax Highlighter :

1. Buka akun blogger.
2. Pilih menu template, pilih edit Html
3. Setelah kalian masuk ke template editor silahkan kalian copy kode di bawah dan pastekan diatas </head>

<script src='http://procejct-saeful13.googlecode.com/svn/JS/SyntaxHighlighter.js' type='text/javascript'/>

4.  Selanjutnya copy kode di bawah ini dan paste code dibawah ini tepat di atas kode ]]></b:skin> atau didalam <style>---</style>

 /*syntax highlighter*/
pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:200px}
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}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
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:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5} 

>Begini cara menggunakannya :

saat kalian mau posting code script html atau javascript dll. masukan dulu code yang mau kalian share di bagian Compose setelah kalian masukan lalu pilih bagian menu HTML tambahkan code diluar syntax yang mau dipost <pre><code> ---syntax yang mau di post---</code></pre>.

Nah begitulah cara membuat kotak syntax/syntax highlightier di dalam sebuah blog. teimakasih sudah berkunjung ke blog flash-reset.blogspot.com