Cara Membuat Syntax Highlighter Pada Blogger

By , 09:00 ~ , 0 komentar
Membuat sytax highlighter adalah sebuah cara yang dapat digunakan untuk memuat source code ataupun script. Itu akan memudahkan pengunjung dalam melihat skrip yang ditampilkan sehingga akan lebih jelas dan mudah dibaca. Tampilan yang akan terlihat pada postingan blogger akan membentuk seperti pada editor yang digunakan untuk membuat source code. Sehingga akan mempermudah para pembaca dalam mempelajari script yang di tampilkan pada postingan.

Warna-warna yang ada di dalam tampilan highlighter juga menyesuaikan dengan ketentuan pada bahasa baku dan warna ketentuannya yang sesuai dengan aslinya. Seperti saat kita memprogram bahasa HTML, PHP, Javascript, Jquery dan sebagainya.

syntax highlighter untuk blogger

Untuk itu kita buat artikel ini untuk mengajarkan cara membuat syntax highlighter pada blogger dengan menanamkan beberapa script ke template blogger.

Bagaimana cara membuat Syntax Highlighter?


Langkah #1 : Login ke Blogger, lalu pilih Template 

Langkah #2 : Kemudian cari kode <head> dan tempelkan kode di bawah ini.

Di bawah ini adalah skrip untuk memanggil javascript untuk menampilkan view seperti pada editor yang dipasang pada postingan blogger.

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

Langkah #3 : Kemudian tambahkan CSS di settingan CSS yang ada pada Template Blogger Anda. Yaitu dengan menambahkan script di bawah ini.

Berikut adalah skrip CSS yang digunakan untuk syntax highlighter untuk blogger.

/*syntax highlighter*/
pre {
   padding:.8em 1em;
   margin:0.5em 0;
   background-color:#eee;
   border:0px solid #eee;
   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:#eee;
   border:1px solid #eee;
   display:block;
   overflow: auto; 
   max-height:200px;
}

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;
} 

Langkah #4 : Simpan, lalu lihat hasilnya.

Penggunaan syntax highlighter akan membuat postingan pada blogger terlihat lebih jelas seperti teks editor. Karena tampilan tersebut berwarna dan jelas, seperti pada gambar contoh di bawah ini :

Contoh penggunaan skrip highlighter pada CSS.

syntax highlighter CSS

Contoh penggunaan skrip highlighter pada jquery.

syntax highlighter jquery

Penggunaan skrip di atas adalah membuat syntax highlighter yang digunakan pada blogger. Khususnya digunakan pada blogger yang memuat postingan seputar script/source code yang digunakan untuk menampilkan HTML, PHP, CSS, dan Javascript.
Al Akram
Cara Membuat Syntax Highlighter Pada Blogger - written by Al Akram , published at 09:00, categorized as Blog , Blogger , Widget . And have 0 komentar
No comment Add a comment

Perhatian Para Pembaca!
Dilarang Keras:
1. Menggunakan kata-kata kotor dalam menulis komentar, terima kasih atas partisipasi saudara/i.
2. Menulis link hidup, link yang tidak berkaitan.
3. Silahkan sertakan sumber jika meng-copy tulisan di atas.
4. Sangat disarankan untuk memfollow blog ini.
5. Jangan lupa untuk berlangganan artikel terbaru.

Cancel Reply
GetID