Membuat Syntax Highlighter di Blog

Membahas tentang Syntax Highlighter tentunya tidak luput dari kode-kode rumit yang terdapat dalam sebuah Blog atau editor source code pada bahasa pemrograman. Apa itu yang dimaksud dengan Syntax Highlighter dan fungsinya? saya akan menjelaskan tentang Syntax Highlighter.

Syntax Highlighter adalah fitur khusus sebuah proses pemindahan kode bahasa pemrograman tertentu dengan tulisan, warna teks, posisi sama persis dengan yang terdapat pada sebuah kode bahasa pemrograman untuk di pindahkan maupun di copas ke dalam bentuk tulisan lain supaya lebih mudah dalam membaca atau mempelajarinya.

Syntax Highlighter hampir persis dengan fitur Blockquote tetapi bedanya untuk fitur blockquote warna teks biasanya hanya satu warna saja, untuk merubah warnanya sesuai dengan kode aslinya harus dilakukan secara manual. Jadi intinya Syntax highlighter akan efektif dalam proses pembuatan atau pemindahannya bila dibandingkan dengan fitur blockquote.

Selain mempercantik tampilan barisan kode di postingan blog, penggunaan Syntax Highlighter juga dimaksudkan untuk pembaca agar dapat dengan mudah mengenal jenis kode yang diberikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya yaitu, pengunjung akan merasa lebih nyaman membaca isi konten blog, dan bagi pengurus atau admin blog akan membuatnya menjadi lebih professional dalam mensajikan artikel-artikel pada blog tutorial mereka.

Di sini saya akan berikan tutorialnya seperti contoh pada blog saya sendiri, namun akan saya berikan kepada anda dengan beberapa pilihan warna background.

Membuat Syntax Highlighter pada Blog

1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum kode </head>

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

4. Simpan kode di bawah ini sebelum kode ]]></b:skin>

/* POJOAQUES TYLE FARHANWEB */
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 DRAK STYLE FARHANWEB*/
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 STYLE FARHANWEB */
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;
}

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

/* TOMMOROW NIGHT BLUE STYLE FARHANWEB */
.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 STYLE FARHANWEB */
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;
}

Pilih salah satu kode di atas yang anda sukai warna backgroundnya maupun teksnya.

Bila sudah memasang style atau tema syntax highlighter yang anda inginkan pada tempelate anda, sekarang save tempelate anda. Gunakan markup HTML di bawah ini untuk mengaktifkan Syntax Highlighter pada saat anda ingin menampilkan source code, seperti kode Javascript, CSS, dan mark up HTML pada postingan anda.

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