» » » » » Syntax Highlighter Simple Untuk Blog

Syntax Highlighter Simple Untuk Blog

,,,
Syntax Highlighter biasanya memang dibutuhkan untuk blog - blog yang sering berbagi kode CSS, Javascript, HTML, PHP dll. Sebenarnya kita bisa saja menuliskan kode/membagikan sebuah kode secara langsung, maksudnya di copy paste ke halaman blog, tapi bila kode/script yang kita bagikan panjang, maka susunan kode yang kita bagikan tersebut pastinya akan terlihat berantakan dan membuat postingan blog menjadi terlalu panjang.


Supaya penulisan kode atau script yang kita bagikan terlihat lebih rapi dan tertata, maka kita memerlukan Syntax Highlighter. Untuk membuat Syntax Highlighter kita hanya perlu menambahkan susunan kode CSS ke template blog, kemudian juga sedikit tambahan Javascript yang bisa di hosting di Google Drive ataupun juga bisa kita hosting ke website yourjavascript.com. Caranya memang hampir sama seperti Cara Mudah Membuat Blok Warna Dalam Postingan Blog , hanya saja disini kita membutuhkan tambahan Javascript

Dibawah ini merupakan cara - cara untuk membuat Syntax Highlighter Simple Untuk Blog
  1. Seperti biasa masuk ke menu Template > Edit HTML
  2. Cari kode <b:skin><![CDATA[/* atau supaya lebih cepat tekan CTRL+F
    mencari script didalam template
  3. Kemudian bila sudah ditemukan copy script dibawah ini dan taruh dibawahnya 
    
/* syntax highlighter ROOT93 */
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}

  4. Terakhir tambahkan script dibawah ini dibawah kode <head> atau sebelum kode </head>
    <script src="http://yourjavascript.com/16724112645/root93.js" type="text/javascript">
Pada tahap ini pembuatan Syntax Highlighter sudah selesai, setiap kali ingin menuliskan sebuah kode CSS, HTML, PHP dll, maka Anda cukup beralih dari mode Compose ke mode HTML lalu masukan kode yang ingin Anda tambahkan/tampilkan didalam postingan blog kedalam tag berikut :

<pre><code> Disini masukan Kode, PHP, Javascript, HTML dlll </code></pre>

Catatan* Sebelum Anda memasukan kode khususnya kode/script PHP, HTML, Javascript, kedalam tag <pre> Anda terlebih dahulu harus melakukan parse terhadap script yang ingin Anda tambahkan menggunakan Kode Parse HTML yang juga tersedia di blog ini

Contoh Syntax Highlighter Simple Untuk Blog
Syntax Highlighter Simple Untuk Blog yang saya bagikan ini merupakan Syntax Highlighter sederhana. Anda juga bisa merubah background warna dari Syntax Highlighter sesuai dengan keinginan dengan merubah properti css background-color:#F7F7F9 Untuk kode warna bisa Anda lihat pada halaman Kode Warna Lengkap Dengan Nama

11 Responses to "Syntax Highlighter Simple Untuk Blog"

  1. Kang Nurul ImanJuly 26, 2016 at 2:26 PM

    Kalau saya mah baru sekarang kang dengar syntax highkigher, maklum soalnya saya kan tidak terlalu hapal sama yang begituan, tapi ini bisa jadi pembelajaran deh untuk oe.

    ReplyDelete
    Replies
    1. Ahmad ZaelaniJuly 26, 2016 at 5:06 PM

      sama kang Saya juga baru ngerti sekarang,, makanya langsung share biar kagak lupa..

      Delete
    2. Kang Nurul ImanJuly 27, 2016 at 9:49 AM

      Keren juga nih kang ahmad punya ilmu baru langsung dishare saya respect kang sama pengertiannya kang ahmad.

      Delete
  2. UnknownJuly 26, 2016 at 3:02 PM

    mantap dah

    ReplyDelete
  3. Djangkaru BumiJuly 26, 2016 at 3:13 PM

    Untuk kode cocok untuk blog yang berisi tutorial blog.
    Sehingga kodenya akan tampak lebih rapi.
    Blogku gado-gado masih malu untuk menerapkan kode diatas.

    ReplyDelete
    Replies
    1. Ahmad ZaelaniJuly 26, 2016 at 5:06 PM

      benar kang biar lebih rapih dan mudah di mengerti...

      Delete
  4. Maman AchmanJuly 26, 2016 at 3:23 PM

    Kalau saya pakai cara sederhana kang, cukup memasukan beberapa kode HTML diantara tulisan yang ingin di highligth, tanpa masuk ke template HTML.

    ReplyDelete
    Replies
    1. Ahmad ZaelaniJuly 26, 2016 at 5:08 PM

      wah keren dong kalu biosa gitumah,, sebenarnya konsepnya sih tetap dipanggil secara otomatis lewat tag "pre" hanya saja ketika pertama kali,, yah harus tambahin susunan css ke template.. :D

      Delete
  5. TergaulJuly 26, 2016 at 6:51 PM

    mantap kang..., ane punya juga syntax tapi jarang di pake..., hehehe

    ReplyDelete
  6. Anisayu NastutikJuly 27, 2016 at 8:21 AM

    Saya agak segan
    Jika harus masuk template untuk perubahan
    Sebab lebih ke kode bawaan
    Maklum hanya paham ganti pewarnaan

    Hihihi

    ReplyDelete
  7. Ficri PebriyanaJuly 27, 2016 at 9:27 AM

    walaupun simpel syntax higlighternya tetep terlihat keren kang, cocok di pasang nih buat blog yang suka bagi-bagikan script kode ya

    ReplyDelete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin

Subscribe to:Post Comments (Atom)