Cara Mudah Membuat Syntax Highlighter (Kotak Script)

Cara Membuat Syntax Highlighter (Kotak Script) Sobat Blogger, Syntax Highlighter adalah kode stabilo, Syntax ini banyak digunakan pada website dan blog, biasanya syntax ini di gunakan pada web dan blog designer atau yang ingin menampilkan kode pada halaman posting yang berisi kode script. Dalam tutorial kali ini saya akan memberi cara bagaimana untuk anda menambahkan Syntax Highlighter di blog anda.

sintaxs opensource ini sangat sederhana dan ringan untuk sebuah kode script, Syntax Highlighter ini di kembangkan oleh Alex Gorbatchev, dan bagi anda yang berminat untuk menambahkan script stabilo Sintaks dan membuatnya tampil di posting anda, silahkan ikuti tutorialnya.

Cara Membuat Syntax Highlighter :

1. Buka akun blogger.
2. Pilih menu template,klik edit Html
3. Silahkan anda copy kode di bawah dan taruh tepat di atas kode </head>

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

4.  Selanjutnya copy kode di bawah ini dan letakan tepat di atas kode ]]></b:skin> 

 /*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} 

Cara Menggunakan :

• Gunakan kode <pre><code> Masukkan JavaScript atau CSS </pre></code> Pada menu Html saat anda membuat posting, dan isikan code script yang akan di tambahakan pada menu compose.

Tweet