Cara Membuat Syntax Highlighter (Kotak Script)

Cara Membuat Syntax Highlighter (Kotak Script) Sobat BloggerSyntax Highlighter adalah kode stabilo, Syntax ini banyak digunakan pada website dan blog, biasanya syntax ini di gunakan pada web dan blog designer atau yang ingin menampilkan kode pada halaman posting yang berisi kode script. Dalam tutorial kali ini saya akan memberi cara bagaimana untuk anda menambahkan Syntax Highlighter di blog anda.

Cara Membuat Syntax Highlighter (Kotak Script)

sintaxs opensource ini sangat sederhana dan ringan untuk sebuah kode script, Syntax Highlighter ini di kembangkan oleh Alex Gorbatchev, dan bagi anda yang berminat untuk menambahkan script stabilo Sintaks dan membuatnya tampil di posting anda, silahkan ikuti tutorialnya.

Cara Membuat Syntax Highlighter :

1. Buka akun blogger.
2. Pilih menu template,klik edit Html
3. Silahkan anda copy kode di bawah dan taruh tepat di atas kode </head>


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

4.  Selanjutnya copy kode di bawah ini dan letakan tepat di atas kode ]]></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} 

Cara Menggunakan :
  • Gunakan kode <pre><code> Masukkan JavaScript atau CSS </pre></code> Pada menu Html saat anda membuat posting, dan isikan code script yang akan di tambahakan pada menu compose.

10 Responses to "Cara Membuat Syntax Highlighter (Kotak Script)"

  1. Wahhh, Saya Izin Coba ya Mba, Smoga Makin maju Lagi Ya Blog nya.




    fokus-belajar.blogspot.com

    BalasHapus
  2. nuhun.. sudah di praktekan di blog saya

    BalasHapus
  3. Terima Kasih KK tutorialnya berguna sekali, sudha saya terapkan di Blog saya.
    Bagi yang mau belajar 'Membuat Template Blogger' dari 0 bisa intip Blog baru saya.

    Nitip link mbak, kalo gak boleh di matiin aja:

    Belajar Buat Template Blogger Dari 0
    http://mugianto1nd.blogspot.co.id/2016/02/belajar-buat-template-blogger.html

    BalasHapus
  4. Gan itu pada tag penutup < / pre> dan apa tidak terbalik gan??

    Komputer Dan Teknologi

    BalasHapus
  5. info yang bermanfaat ga
    http://giribig.com/2016/06/cara-membuat-syntax-highlighter-otomatis-terbaru-di-blogger.html

    BalasHapus
  6. Keren gan, ijin coba.

    dbetimes.blogspot.com

    BalasHapus