Koleksi Syntax Highlight Theme

pic : andoelsean.blogspot.com

Koleksi Syntax Highlight Theme - Apa itu Syntax Highlight ? Syntax Highlight adalah text editor yang sering digunakan untuk menampilkan Source code seperti Mark up HTML, JavaScript,Css dll pada sebuah tutorial bahasa pemrograman . Simpelnya begitu .

Dan sebelumnya saya sudah share bagaimana cara menginstal Syntax Highlight pada blog dan cara penerapannya yang bisa anda lihat disini .
Dan kali ini saya akan berbagi beberapa Theme Syntax Highlighter yang bisa anda gunakan untuk memodifikasi Syntax Highlight sebelumnya atau anda gunakan untuk membuat tampilan kode di posting anda semakin mantap .

Disini ada 10 Koleksi Theme Syntax Highlight yang bisa anda pilih berikut Demo .

Yang perlu lakukan untuk menggunakan Theme ini adalah anda tinggal meletakkan Css Syntax Highlight dibawah ini tepat diatas kode ]]></b:skin>

Note: Jika sebelumnya anda sudah menggunakan theme defaut yang saya bagikan di posting saya tentang cara menginstal Syntax Highlight adalah mengganti Css Syntax Highlight yang anda letakkan diatas ]]></b:skin>

Syntax Highlight Theme Collection

1. Pojoaque

/*

Pojoaque Style by Jason Tate

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;

}

Demo

2. Solarized Dark

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;

}

Demo

3. School Book

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

Demo

4. Rainbow

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

Demo

5. Monokai

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

Demo

6. Tommorow Night Blue

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

Demo

7. Brown Papper

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

Demo

8. Sunburst

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

Demo

9. Google 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;
}

Demo

10. GitHub

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

Demo

Saya rasa cukup untuk posting kali ini tentang Syntax Highlight yang bisa anda gunakan untuk mempercantik tampilan Source code di poasting anda , dan semoga artikel ini bermanfaat .