Cara Membuat Syntax Highlighter Otomatis di Blog

Cara Membuat Syntax Highlighter di Blog  - Hallo Sahabat Zure. Kali ini mimin ingin memberikan Tips nih yang berhubungan dengan  HTML   Cara...

Cara Membuat Syntax Highlighter di Blog - Hallo Sahabat Zure. Kali ini mimin ingin memberikan Tips nih yang berhubungan dengan HTML Cara Membuat Syntax Highlighter di Blog. Apa itu Syntax Highlighter ? Syntax Highlighter adalah fitur dari beberapa teks editor untuk menampilkan teks (Terutama Source Code) dalam berbagai warna, font sesuai dengan istilah kategori. Fitur ini mempermudahkan penggunanya didalam menulis bahasa pemrograman. Syntax Highlighter adalah untuk memungkinkan penyisipan potongan kode berwarna pada halaman web tanpa bergantung pada sisi script server.

Dalam Syntax Highlighter yang mimin post ini, Kita tidak perlu Repot-repot seperti ;

Untuk Css :  <pre class="line-numbers language-css" data-codetype="CSS" title="CSS"><code class=" language-css"> Bla bla bla</code></pre>

Untuk Javascript :  <pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript"><code class=" language-javascript">Bla Bla Bla </code></pre>

Kita tidak perlu Repot-repot sampai-sampai dibedakan begitu, Dalam Syntax Highlighter yang Mimin bagikan ini bersifat Otomatis yang artinya CSS,Javascript,JQuery dalam 1 Script, tidak dibedakan seperti diatas. Jadi ini juga berupa Saran dari mimin juga bagi blog yang Nichenya tentang HTML gitu.

Syntax Highlighter ini juga berguna untuk Web-web agan yang membahas Tentang HTML dan ada memasang Anti-Copas diblog. Walaupun anda memasang Anti-Copas, Script yang anda Bagikan melalui Fitur Syntax Highlighter tetap bisa di Copas, Jadi fitur ini Berguna untuk Blog agan yang Membahas tentang HTML

Fitur - Fitur dari Syntax Highlighter :
1. Sangat Ringan
2. Mudah digunakan dan dikembangkan
3. Mendukung semua Web Browser seperti : Google Chrome, Mozilla Firefox, IE, Dll
4. Mendukung beberapa format bahasa
5. 100% Untuk pengguna

Cara Memasasang Syntax Highlighternya

Nah sekarang mimin akan langsung memberikan Cara Membuat Syntax Highlighter di Blog silahkan disimak :
1. Masuk ke Blogger>Template/Tema>Edit HTML
2. Cari Code ]]></b:skin> lalu Copy-Pastekan Code dibawah tepat di atas Code ]]></b:skin>

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

3. Temukan Code </head>, Lalu letakkan code dibawah ini Tepat diatasnya

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

4. Lalu Klik Simpan Template

Cara Penggunaan Syntax Highlighter Otomatisnya

Cara penggunaan Syntax Highlighternya, Copy Script dibawah lalu Pastekan dalam HTML pada saat membuat Postingan, lalu Ubah "Kode JavaScript, jQuery atau CSS masukkan disini" dalam menu Compose dengan Script Kalian.

*Sorry ya Gaes, Mimin gabisa buat di Postingan karena code yang diatas malah jadi Syntax Highlighter jadi mimin Pake Image

Contoh Syntaxnya bisa kalian lihat yang diatas, yang mimin gunakan.

Mudah bukan? Begitulah Cara Membuat Syntax Highlighter Otomatis di Blog. Jika ada yang kurang Paham silahkan corat-coret dikolom Komentar ya. Semoga artikel ini dapat bermanfaat bagi kita semua. Terima Kasih

Tag : Cara Membuat Syntax Highlighter di Blog, Cara Memasang Syntax Highlighter di Blog, Cara Menggunakan Syntax Highlighter, Fungsi Syntax Highlighter, Apa itu Syntax Highlighter