Syntax Highlighter adalah sebuah efek penempatan warna tertentu pada sebuah teks yang akan memberikan nuansa menarik karena pada tiap-tiap teks tertentu akan mempunyai nilai warna tersendiri. Kalau ditulis secara manual, maka akan memakan waktu yang cukup lama, karena harus meletakkan nilai warna satu persatu pada tiap-tiap teks.
Penempatan Syntax Highlighter ini akan menarik perhatian para pengunjung dan juga akan mempermudah pengunjung untuk mengenal jenis kode yang di tulis oleh publisher.
Biar sesuai dengan apa yang diharapkan, maka perhatikan langkah demi langkah penempatan kode script, style atau CSS dibawah ini dengan seksama. Langkah yang harus dilakukan adalah:
Cara meletakkan CSS Rainbow Syntax Highlighter pada blog.
Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode dibawah ini tepat diatas kode </head>.
<script src="https://cdn.rawgit.com/ardezign/js/69b880e1/highlight-sd1.js"/>
<script>hljs.initHighlightingOnLoad();</script>
Pilih salah satu kode CSS dibawah ini yang cocok dengan selera dan selanjutnya, letakkan dibawah kode ]]></b:skin> atau </style>.
/* Aqua Skin Design */
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}
/* Solarized Dark Skin Design */
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}
/* Rainbow Skin Design */
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}
/* Monokay Skin Design */
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}
/* Tomorrow Night Blue Skin Design */
.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}
/* Sunburst Skin Design */
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}
Cara menerapkan CSS Rainbow Syntax Highlighter pada entri posting.
Pada mode HTML, Letakkah kode dibawah ini pada saat penulisan entri posting.
<pre><code>
Isi Kode jQuery, Script, Javascript, Kode CSS yang sudah diparse ke HTML
</code></pre>
Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.
Show Parser Hide Parser