CARA MEMBUAT SYNTAX HIGHLIGHTER

Hai sobat, ane hadir lagi di kehidupan sobat. Syntax highlighter itu kalo dideskripsikan kayak kotak script gitu, jelasnya liat gambar aja. Nah untuk memasang syntax highlighter ini diperlukan javascript dan CSS. Ok langsung aja, simak tutorialnya berikut..........

1. Buka blogger.com
2. Langsung ke Template terus ke Edit HTML
3. Jika sudah copy kode dibawah dan taruh di atas kode </head>

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

4. copy kode CSS ini dan taruh di atas ]]></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}

---

Untuk penggunaan caranya gampang, saat ngepost gunakan HTML jangan compose
Gunakan <code> masukkan kodenya </code> untuk kode yang pendek
Gunakan <pre><code> masukkan javascript atau css </pre></code> untuk memasukkan javascript, css, atau HTML yang panjang.

script : saeful 13, alamat blognya ane lupa.

Subscribe to receive free email updates: