Cara Memasang Kode Warna Keren Di Blog

2014-01-15T05:31:00.001-08:00

Cara Memasang Kode Warna Di Blog | Jika anda cari sebetulnya sudah banyak sekali blogger yang memberikan tutorial-tutorial untuk memasang tool kode warna di blog, namun kali ini saya juga akan memberikan artikel yang sama yaki langkah-langkah Memasang Kode Warna Keren Di Blog. Mengapa saya bilang keren ? Ya karena tool ini berbeda dari yang lain, karena tool warna ini saya ambil dari blog nya seorang master blogger +Kang Ismet. Awalnya saya penasaran dengan tool warna kang ismet yang keren , kemudian saya tertarik dengan tool tersebut dan akhirnya saya ambil deh kode tool warnanya :p

Cara Memasang Tools Kode Warna Di Blog sangat mudah anda tinggal menyalin kode ini di tempat yang anda inginkan , misalnya jika anda ingin menampilkanya di bacaan atau postingan , maka salin dan paste kode ini di HTML ( bukan compose ) . Berikut kodenya


<center>
<object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="500" id="obj1" width="500">

<param value="http://www.2createawebsite.com/build/color.swf" name="movie">

<param value="High" name="quality"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="500" height="500">

</object>

<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="500" id="col" width="500">

<param value="sameDomain" name="allowScriptAccess"><param value="http://www.2createawebsite.com/build/col.swf" name="movie"><param value="high" name="quality"><param value="#ffffff" name="bgcolor">

<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="500" align="middle" height="500">

</object>

</center>

Setelah anda menyalin dan mempaste kode di atas , Al-Hasil nanti hasilnya seperti di bawah ini :

Cara Membuat Widget Chat Box di Blog

2014-01-15T04:31:00.000-08:00

Kali ini saya akan berbagi Cara Membuat Chat Box dengan aplikasi CBOX.
Chat Box atau Guest Box atau sebagainya adalah fasilitas untuk kita chatting dengan teman di dunia maya atau dengan teman Blogger khususnya. Manfaat lainya adalah agar alamat Blogspot kita dapat diketahui teman blogger dapat menyebar atau bahkan terkenal. Lumayan, buat bantu-bantu agar blogspot kita rame gitu deh..hha.
Salah satu situs chat box adalah CBOX, tak perlu basa-basi lagi mari kita mulai.1. Masuk ke situs cbox, http://www.cbox.ws/ .
2. Lanjut, pilih sign up tentunya untuk buat akun.

3. Pada tahap sign up, silakan isi dengan lengkap. cbox name isi dengan keinginan sobat, email address isikan alamat email sobat, password isikan tanpa diketahui orang lain (mesti lah,hha), website isikan alamat blogspot/web tujuan sobat, language pilih bahasa yang sobat mengerti, style pilih backround yang anda suka, jangan lupa centang terms and conditions, lanjut klik "create my cbox".

4. cbox sobat berhasil dibuat.

5. Masuk ke yahoo dan periksa mail sobat, pasti ada mail dari cbox. Baca mail dari cbox dan klik link dari cbox untuk dapat login ke control panel cbox.

6. Setelah link tersebut diklik maka sobat akan masuk ke control panel cbox. Lalu sobat lakukan proses login.

7. Lalu kita masuk ke laman berikutnya, gulir sedikit ke bawah disitu ada kode html. Blog kode tersebut dan "copy".

8. Lanjut, masuk ke akun blogger sobat dan pilih "Tata Letak". Tentukan dimana cbox akan disimpan. Klik "Tambahkan gadget", pilih HTML/JavaScript dan paste-kan kode HTML dari cbox tadi.

Selesai, sobat sekarang bisa chat dengan teman blog menggunakan cbox.

10 Koleksi SyntaxHighlighter Keren di Blogger

2014-01-14T23:15:00.001-08:00

Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan SyntaxHighlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language). Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source ( seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.

Kali ini Blog Bill Boyz, ingin sharing koleksi Syntax Highlight yang keren dengan CSS dan Javascript khusus untuk Blogger. Ada 10 koleksi SyntaxHighlighter keren yang saya kumpulkan dari sumbernya softwaremaniacs.org, yang dapat Anda gunakan free untuk menampilkan source code (kode box) di blog-blog Anda. Memang ada banyak artikel atau situs yang berbagi kode dan cara memasang SyntaxHighlighter di halaman blog/website ( baik yang menggunakan javascript, jQuery, maupun markup HTML) seperti Prisma, GeSHi, Google Code Prettify, SyntaxHighlighter, SHJS – Syntax Highlighting in JavaScript, Ultraviolet dan yang lainnya. Saya lebih memilih HIGHLIGHT.JS ini (dari softwaremaniacs) dengan alasan lebih mudah dan dapat bekerja secara otomatis mencari blok kode, mendeteksi jenis bahasa, dan highlighting (menyorot kode).

HIGHLIGHT.JS mengenali sekurangnya 54 bahasa program dan dibundel dengan 26 theme style. Untuk itu saya hanya akan memilih menjadi 3 bahasa code, yang paling sering digunakan oleh blogger (dalam tutorial blog-nya) untuk menampilkan source code, yaitu kode CSS, Javascript, dan mark up HTML. Dan 10 style theme Syntax Highlight pilihan untuk Sobat Blogger!!

Cara Pasang/Instal SyntaxHighlighter di Blog (Box Code)

1. Untuk mengaktifkan fitur ini dibutuhkan javascript berikut, yang dapat Anda letakkan di template tepat diatas

tag </head>

atau bisa juga sebelum

tag </body>

<script src="https://problogizjs.googlecode.com/files/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

2. Kemudian dilanjutkan meletakan style highlighting (CSS), pilihlah salah satu dari 10 macam style dibawah ini (lihat Demo Live-nya sebelum memutuskan) mana yang cocok untuk Blog Sobat. Copy Kode CSS-nya (klik 2x untuk select all) dan letakkan tepat diatas

tag]]></b:skin>

, lalu Simpan Template.

3. Gunakan mark up HTML berikut. untuk menerapkan SyntaxHighlighter pada source code di halaman postingan Anda:

<pre><code>
Isi Kode Javascript, jQuery atau Kode CSS atau Kode HTML
disini...... 
</code></pre>

10 Koleksi SyntaxHighlighter Keren di Blogger

1. Pojoaque

DEMO Pojoaque SyntaxHighlighter

/*
Pojoaque Style by Jason Tate
http://web-cms-designs.com/ftopict-10-pojoaque-style-for-highlight-js-code-highlighter.html
Based on Solarized Style from http://ethanschoonover.com/solarized
*/
pre code {
display: block; padding: 0.5em;
color: #DCCF8F;
background: url('https://sites.google.com/site/problogiz/home/pojoaque.jpg') repeat scroll left top #181914;}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #586e75;
  font-style: italic;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .clojure .title,
pre .nginx .title {
  color: #B64926;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #468966;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .clojure .built_in,
pre .identifier,
pre .id {
  color: #FFB03B;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}
pre .css .attribute {
  color: #b89859;
}
pre .css .number,pre .css .hexcolor{
  color: #DCCF8F;
}
pre .css .class {
  color: #d3a60c;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}
pre .tex .formula {
  background: #073642;
}

2. Solarized - Dark

DEMO Solarized - Dark SyntaxHighlighter

/*

Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull 

*/

pre code {
  display: block; padding: 0.5em;
  background: #002b36; color: #839496;
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
  color: #586e75;
  font-style: italic;
}

pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
  color: #859900;
}

pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #2aa198;
}

pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id {
  color: #268bd2;
}

pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}

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 {
  color: #cb4b16;
}

pre .deletion {
  color: #dc322f;
}

pre .tex .formula {
  background: #073642;
}

3. School Book

DEMO School Book SyntaxHighlighter

/*

School Book style from goldblog.com.ua (c) Zaripov Yura

*/

pre code {
  display: block; padding: 15px 0.5em 0.5em 30px;
  font-size: 11px !important;
  line-height:16px !important;
}

pre{
  background:#f6f6ae url('https://sites.google.com/site/problogiz/home/school_book.png');
  border-top: solid 2px #d2e8b9;
  border-bottom: solid 1px #d2e8b9;
}

pre .keyword,
pre .literal,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special {
  color:#005599;
  font-weight:bold;
}

pre code,
pre .subst,
pre .tag .keyword {
  color: #3E5915;
}

pre .string,
pre .title,
pre .haskell .type,
pre .tag .value,
pre .css .rules .value,
pre .preprocessor,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .ruby .string,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .nginx .built_in,
pre .tex .command {
  color: #2C009F;
}

pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .deletion,
pre .shebang,
pre .apache .sqbracket {
  color: #E60415;
}

pre .keyword,
pre .literal,
pre .css .id,
pre .phpdoc,
pre .title,
pre .haskell .type,
pre .vbscript .built_in,
pre .sql .aggregate,
pre .rsl .built_in,
pre .smalltalk .class,
pre .xml .tag .title,
pre .diff .header,
pre .chunk,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .command,
pre .request,
pre .status {
  font-weight: bold;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

4. Rainbow

DEMO Rainbow SyntaxHighlighter

/*

Style with support for rainbow parens

*/

pre ::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
pre ::selection { background:#FF5E99; color:#fff; text-shadow: none; }

pre code {
  display: block; padding: 0.5em;
  background: #474949; color: #D1D9E1;
}
pre .body,
pre .collection {
   color: #D1D9E1;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #969896;
  font-style: italic;
}

pre .keyword,
pre .clojure .attribute,
pre .winutils,
pre .javascript .title,
pre .addition,
pre .css .tag {
  color: #cc99cc;
}

pre .number { color: #f99157; }

pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #8abeb7;
}

pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .identifier
{
  color: #b5bd68;
}

pre .class .keyword
{
  color: #f2777a;
}

pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .label,
pre .id,
pre .lisp .title,
pre .clojure .title .built_in {
   color: #ffcc66;
}

pre .tag .title,
pre .rules .property,
pre .django .tag .keyword,
pre .clojure .title .built_in {
  font-weight: bold;
}

pre .attribute,
pre .clojure .title {
  color: #81a2be;
}

pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #f99157;
}

pre .deletion {
  color: #dc322f;
}

pre .tex .formula {
  background: #eee8d5;
}

5. Monokai

DEMO Monokai SyntaxHighlighter

CSS code:

/*
Monokai style - ported by Luigi Maselli - http://grigio.org
*/

pre code {
  display: block; padding: 0.5em;
  background: #272822;
}

pre .tag,
pre .tag .title,
pre .keyword,
pre .literal,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special {
  color: #F92672;
}

pre code {
  color: #DDD;
}

pre code .constant {
 color: #66D9EF;
}

pre .class .title {
 color: white;
}

pre .attribute,
pre .symbol,
pre .symbol .string,
pre .value,
pre .regexp {
 color: #BF79DB;
}

pre .tag .value,
pre .string,
pre .subst,
pre .title,
pre .haskell .type,
pre .preprocessor,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .prompt {
  color: #A6E22E;
}

pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .deletion,
pre .shebang,
pre .apache .sqbracket,
pre .tex .formula {
  color: #75715E;
}

pre .keyword,
pre .literal,
pre .css .id,
pre .phpdoc,
pre .title,
pre .haskell .type,
pre .vbscript .built_in,
pre .sql .aggregate,
pre .rsl .built_in,
pre .smalltalk .class,
pre .diff .header,
pre .chunk,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .special,
pre .request,
pre .status {
  font-weight: bold;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

6. Tommorow Night Blue

DEMO Tommorow Night Blue SyntaxHighlighter

CSS code:

/* Tomorrow Night Blue Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */

.tomorrow-comment, pre .comment, pre .title {
  color: #7285b7;
}

.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
  color: #ff9da4;
}

.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
  color: #ffc58f;
}

.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
  color: #ffeead;
}

.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
  color: #d1f1a9;
}

.tomorrow-aqua, pre .css .hexcolor {
  color: #99ffff;
}

.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
  color: #bbdaff;
}

.tomorrow-purple, pre .keyword, pre .javascript .function {
  color: #ebbbff;
}

pre code {
  display: block;
  background: #002451;
  color: white;
  padding: 0.5em;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

7. Brown Papper

DEMO Brown Papper SyntaxHighlighter

CSS code:

/*

Brown Paper style from goldblog.com.ua (c) Zaripov Yura

*/

pre code {
  display: block; padding: 0.5em;
  background:#b7a68e url(('https://sites.google.com/site/problogiz/home/brown_papersq.png');
}

pre .keyword,
pre .literal,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special,
pre .request,
pre .status {
  color:#005599;
  font-weight:bold;
}

pre code,
pre .subst,
pre .tag .keyword {
  color: #363C69;
}

pre .string,
pre .title,
pre .haskell .type,
pre .tag .value,
pre .css .rules .value,
pre .preprocessor,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .ruby .string,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .number {
  color: #2C009F;
}

pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .deletion,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula {
  color: #802022;
}

pre .keyword,
pre .literal,
pre .css .id,
pre .phpdoc,
pre .title,
pre .haskell .type,
pre .vbscript .built_in,
pre .sql .aggregate,
pre .rsl .built_in,
pre .smalltalk .class,
pre .diff .header,
pre .chunk,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .command {
  font-weight: bold;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.8;
}

8. Sunburst

DEMO Sunburst SyntaxHighlighter

CSS code:

/*

Sunburst-like style (c) Vasily Polovnyov

*/

pre code {
  display: block; padding: 0.5em;
  background: #000; color: #f8f8f8;
}

pre .comment,
pre .template_comment,
pre .javadoc {
  color: #aeaeae;
  font-style: italic;
}

pre .keyword,
pre .ruby .function .keyword,
pre .request,
pre .status,
pre .nginx .title {
  color: #E28964;
}

pre .function .keyword,
pre .sub .keyword,
pre .method,
pre .list .title {
  color: #99CF50;
}

pre .string,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date,
pre .tex .command {
  color: #65B042;
}

pre .subst {
  color: #DAEFA3;
}

pre .regexp {
  color: #E9C062;
}

pre .title,
pre .sub .identifier,
pre .pi,
pre .tag,
pre .tag .keyword,
pre .decorator,
pre .shebang,
pre .prompt {
  color: #89BDFF;
}

pre .class .title,
pre .haskell .type,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc {
  text-decoration: underline;
}

pre .symbol,
pre .ruby .symbol .string,
pre .number {
  color: #3387CC;
}

pre .params,
pre .variable,
pre .clojure .attribute {
  color: #3E87E3;
}

pre .css .tag,
pre .rules .property,
pre .pseudo,
pre .tex .special {
  color: #CDA869;
}

pre .css .class {
  color: #9B703F;
}

pre .rules .keyword {
  color: #C5AF75;
}

pre .rules .value {
  color: #CF6A4C;
}

pre .css .id {
  color: #8B98AB;
}

pre .annotation,
pre .apache .sqbracket,
pre .nginx .built_in {
  color: #9B859D;
}

pre .preprocessor {
  color: #8996A8;
}

pre .hexcolor,
pre .css .value .number {
  color: #DD7B3B;
}

pre .css .function {
  color: #DAD085;
}

pre .diff .header,
pre .chunk,
pre .tex .formula {
  background-color: #0E2231;
  color: #F8F8F8;
  font-style: italic;
}

pre .diff .change {
  background-color: #4A410D;
  color: #F8F8F8;
}

pre .addition {
  background-color: #253B22;
  color: #F8F8F8;
}

pre .deletion {
  background-color: #420E09;
  color: #F8F8F8;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

9. Google Code

DEMO Google Code SyntaxHighlighter

CSS code:

/*
Google Code style (c) Aahan Krish
*/
pre code {
  display: block; padding: 0.5em;
  background: white; color: black;
}
pre .comment,
pre .template_comment,
pre .javadoc,
pre .comment * {
  color: #800;
}
pre .keyword,
pre .method,
pre .list .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tag .title,
pre .setting .value,
pre .winutils,
pre .tex .command,
pre .http .title,
pre .request,
pre .status {
  color: #008;
}
pre .envvar,
pre .tex .special {
  color: #660;
}
pre .string,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date,
pre .regexp {
  color: #080;
}
pre .sub .identifier,
pre .pi,
pre .tag,
pre .tag .keyword,
pre .decorator,
pre .ini .title,
pre .shebang,
pre .prompt,
pre .hexcolor,
pre .rules .value,
pre .css .value .number,
pre .literal,
pre .symbol,
pre .ruby .symbol .string,
pre .number,
pre .css .function,
pre .clojure .attribute {
  color: #066;
}
pre .class .title,
pre .haskell .type,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc,
pre .typename,
pre .tag .attribute,
pre .doctype,
pre .class .id,
pre .built_in,
pre .setting,
pre .params,
pre .variable,
pre .clojure .title {
  color: #606;
}
pre .css .tag,
pre .rules .property,
pre .pseudo,
pre .subst {
  color: #000;
}

pre .css .class, pre .css .id {
  color: #9B703F;
}
pre .value .important {
  color: #ff7700;
  font-weight: bold;
}
pre .rules .keyword {
  color: #C5AF75;
}
pre .annotation,
pre .apache .sqbracket,
pre .nginx .built_in {
  color: #9B859D;
}
pre .preprocessor,
pre .preprocessor * {
  color: #444;
}
pre .tex .formula {
  background-color: #EEE;
  font-style: italic;
}
pre .diff .header,
pre .chunk {
  color: #808080;
  font-weight: bold;
}
pre .diff .change {
  background-color: #BCCFF9;
}
pre .addition {
  background-color: #BAEEBA;
}
pre .deletion {
  background-color: #FFC8BD;
}
pre .comment .yardoctag {
  font-weight: bold;
}

10. GitHub

DEMO GitHub SyntaxHighlighter

CSS code:

/*
github.com style (c) Vasily Polovnyov
*/
pre code {
  display: block; padding: 0.5em;
  color: #333;
  background: #f8f8ff
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
  color: #998;
  font-style: italic
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .nginx .title,
pre .subst,
pre .request,
pre .status {
  color: #333;
  font-weight: bold
}
pre .number,
pre .hexcolor,
pre .ruby .constant {
  color: #099;
}
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula {
  color: #d14
}
pre .title,
pre .id {
  color: #900;
  font-weight: bold
}
pre .javascript .title,
pre .lisp .title,
pre .clojure .title,
pre .subst {
  font-weight: normal
}

pre .class .title,
pre .haskell .type,
pre .vhdl .literal,
pre .tex .command {
  color: #458;
  font-weight: bold
}

pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
  color: #000080;
  font-weight: normal
}

pre .attribute,
pre .variable,
pre .lisp .body {
  color: #008080
}
pre .regexp {
  color: #009926
}
pre .class {
  color: #458;
  font-weight: bold
}

pre .symbol,
pre .ruby .symbol .string,
pre .lisp .keyword,
pre .tex .special,
pre .prompt {
  color: #990073
}

pre .built_in,
pre .lisp .title,
pre .clojure .built_in {
  color: #0086b3
}
pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
  color: #999;
  font-weight: bold
}
pre .deletion {
  background: #fdd
}

pre .addition {
  background: #dfd
}

pre .diff .change {
  background: #0086b3
}
pre .chunk {
  color: #aaa
}

Selamat Mencoba!!

Dengan SyntaxHighlighter sumber kode yang ditampilkan di postingan Anda, tentu lebih memberikan kepercayaan dan kepuasan tersendiri bagi user atau pembaca setia Blog Sobat.