Catatan Sang Pemula: Cara Membuat Syntax Highlighter

Simple Syntax Highlighter

Syntax Highlighter merupakan script yang dibuat untuk membuat sebuah kode script dalam sebuah blog ataupun website. Untuk website yang general mungin masih sebagian yang memanfaatkannya karena jarang dibutuhkan juga sih..hehe.

Tutorial untuk kali ini berawal dari perburuan saya untuk mencari script dari Syntax Highlighter yang memang mau saya gunakan diblog ini, dan akhirnya saya ketemu di web nya Madamvia yang paling cocok dan sesuai untuk blog saya.

Oleh karenanya, sekarang saya buat sebuah tutorial yang sama namun, dengan script yang sedikit saya modifikasi, .hehe semoga bermanfaat bagi kawan-kawan, berikut tutorialnya,

Tutorial Membuat Syntax Highlighter

Pertama, silakan buka akun blogger anda

Kedua, buka template, kemudian edit HTML

Ketiga, copy dan paste kan script dibawah ini dan letakkan tepat diatas kode </head>

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

Keempat, langkah terakhir copy dan paste kan script di bawah ini dan letakkan tepat diatas ]]></b:skin>

/*syntax highlighter*/
pre{padding:.8em 1em;margin:0.5em 0;background-color:#ededf2;border:2px 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:#3b8800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#69a7d2}
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:#e70905}
pre .tex .formula{background:#eee8d5}

Sekian tutorial untuk membuat syntax highlighter semoga bermanfaat, dan Jangan lupa juga untuk menglihat trik-trik blogger seru lainnya DISINI