Koleksi Tema Syntax Highlighter

Koleksi Tema Syntax Highlighter - Mengulas sedikit tentang syntax highlighter. Syntax Highlighter adalah sebuah fitur pada text editor , IDE dan sejenisnya, ini berfungsi untuk menyorot text terutama untuk menyorot sebuah souce code program dalam berbagai warna dan bentuk huruf  sesuai dengan istilah dan kategorinya.

Bagaimana ? sekarang sudah ada gambaran tentang apa itu syntax highlighter ?!

Pembahasan kali ini meneruskan pembahasan yang sebelumnya tentang cara memasang syntax highlighter pada blog, baca disini . kali ini saya akan berbagi koleksi tema atau template tampilan syntax highlighter, berikut adalah tema css dari syntax highlighter :

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. Tomorrow 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 Paper
/* 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 Like
/* 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 ingatkan kembali, alangkah lebih baik jika anda membaca artikel ku yang sebelumnya : Cara memasang syntax highlighter pada blog