Cara Membuat Syntax Highlighter Otomatis Di Blog

Author : sigopel Published: 4:14 PM

Syntax Highlighter berfungsi seperti blockquote tetapi syntax highlighter bisa digunakan untuk script script seperti css,javascript,dll. Cara Membuat Syntax Highlighter Otomatis Di Blog cukup mudah, tidak terlalu sulit. Syntax Hoghlighter ini cocok untuk blog yang berniche tutorial blogging, agar terlihat lebih elegan dan simple. Dan ini tidak akan memperberat blog anda, kecuali anda menggunakan berbagai macam syntax highlighter dalam 1 blog mungkin akan mempengaruhi kecepatan loading blog anda.

Syntax Highlighter bisa digambarkan seperti ada kotak yang diisi untuk kode atau script script yang disajikan oleh author blog untuk visitornya. Kotak ini sebagai pembatas untuk kode agar terlihat lebih rapih dan kita tau kode mana yang harus dicopy.

Contoh Syntax Highlighter

Cara Membuat Syntax Highlighter Otomatis

Pertama: Masuk Ke Blogger Lalu ke Template dan Edit HTML

Kedua: Letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>

/* syntax highlighter Otomatis */
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}

Ketiga: Lalu letakan kembali kode dibawah ini tepat diatas kode </head>

<script src='https://googledrive.com/host/0B8a75E285BMHMDVkVGY1dUhzUUE' type='text/javascript'/>

Keempat: Save Template / Simpan

Cara Menggunakannya

Untuk menggunakannya anda harus menambahkan kode <pre><code> dan diakhiri </pre></code> pada script yang akan anda post. Contoh:

<pre><code>TEXT CSS,JAVASCRIPT,SCRIPT,DLL</pre></code>

Sekian dari Cara Membuat Syntax Highlighter Otomatis. Jika ada kesalahan ataupun saran silahkan berkomentar di kolom yang sudah disediakan.
Source : bungfrangki.com