Menggunakan Syntax Highlight Dari Highlight.js

Menggunakan Syntax Highlight Dari Highlight.js - Highlight untuk sebuah script kode pada sebuah postingan akan lebih baik dari segi tampilannya dengan menggunakan Highlight.js, seperti pada sebelumnya Highlight dengan mengunakan Syntax Highlight dari Prism, kedua jenis Syntax Highlight tersebut memiliki style yang berbeda dan cara penggunaannya pun berbeda.

Syntax Highlight dengan menggunakan Highlight.js ini lebih mudah dalam penggunaanya, karena tidak membutuhkan class untuk tiap-tiap bahasa yang dipergunakan, walaupun lebih simpel dalam penggunaannya Highlight.js jika dibandingkan dengan Syntax Highlight dari Prism akan kalah cepat dalam hal loading.

Walaupun begitu kita serahkan saja pada pengguna untuk memilih Syntax Highlight yang cocok dipergunakan untuk menampilkan script kode pada sebuah posting.

✾✾✾

Instalasi Highlight.js

Instalasi atau pemasangan Syntax Highlight pada web/blog (blogger), letakan .js diatas </head> atau </body>, seperti ini:

<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>

Sebaiknya upload sendiri script .js-nya melalui media peyimpanan yang kalian sukai, seperti google kode ataupun yang lainnya, script .js bisa kalian download melalui http://highlightjs.org/download/ sebelum melakukan download, kalian bisa memilih bahasa apa saja yang akan dipakai.

Setelah meletakan .js pada tempatnya, langkah selanjutnya adalah memilih style Syntax Highlight, untuk memilih style yang cocok kita bisa melihat pada ruang demo melalui link dibawah ini:

• Demo

Ketika kita mendownload script .js, itu sudah termasuk CSS style terdownload hanya saja file-nya dalam folder terpisah, kalian bisa membuka file css tersebut dengan notepad, browser, notepad++ atau program lain yang mendukung.

Kalian bisa mengcopy CSS-nya dan letakan diatas ]]></b:skin>.

Salah satu contoh CSS style dengan nama Solarized_Dark yang bisa kalian aplikasikan untuk style Syntax Highlight, CSS-nya seperti ini:

CSS

/* Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com> */

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 .rules .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,
pre .css .function {
  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 .pragma,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title,
pre .css .pseudo {
  color: #cb4b16;
}

pre .deletion {
  color: #dc322f;
}

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

Cara Penggunaan

HTML yang dipergunakan untuk menampilkan dalam postingan seperti ini:

<pre><code> Source Kode Disini </code></pre>

Highlight.js tidak menggunakan class untuk menentukan bahasa yang akan akan ditampilkan seperti pada Syntax Highlight Prism.

Semoga bermanfaat.