Syntax Highlight Menggunakan Prism Untuk Kode Lebih Berwarna

Syntax Highlight Menggunakan Prism Untuk Kode Lebih Berwarna - Ada beberapa pilihan coding highlight untuk menampilkan coding pada sebuah posting menjadil lebih baik, indah dan tentunya memberikan kemudahan pada pembaca untuk mempelajarinya, pilihan Syntax Highlight seperti Highlight js, Syntax Hightlight dari Alex Gorbatchev dan yang akan saya tulis dibawah ini adalah highlight dari Prism.

Tiap-tiap highlight mempunyai kelebihan dan kekurangannya masing-masing, baik dari loading maupun style yang ditampilkan, style merupakan pilihan yang bisa kita gunakan untuk menampilkan coding menjadi lebih baik dari segi tampilan dan kecocokan dengan template yang dipergunakan serta mempermudah pembaca untuk mempelajari coding yang disajikan.

Highlight dari Prism mempunyai kelebihan dari segi loading dan style yang ada pun memiliki beberapa pilihan tampilan yang bisa kita pilih untuk kecocokan untuk sebuah template.

① Highlight js

② Syntax Hightlight dari Alex Gorbatchev

Untuk lebih mengetahui seperti apa style-style yang disajikan bisa langsung menuju http://prismjs.com.

Cara Pemasangan

Pilihlah style yang akan dipergunakan dan bahasa yang akan disajikan. Sebagai contoh style yang akan kita pergunakan adalah style dengan nama Okaidia.

letakan css dibawah ini diatas ]]></b:skin>

/**
 * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
 * @author Tim  Shedor
 */

code[class*="language-"],
pre[class*="language-"] {
  color: black;
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  position:relative;
  padding: 1em;
  margin: .5em 0;
  -webkit-box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
  -moz-box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
  box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
  border-left: 10px solid #358ccb;
  background-color: #fdfdfd;
  background-image: -webkit-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
  background-image: -moz-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
  background-image: -ms-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
  background-image: -o-linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
  background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
  background-size: 3em 3em;
  background-origin:content-box;
  overflow:visible;
  max-height:30em;
}

code[class*="language"] {
  max-height:29em;
  display:block;
  overflow:scroll;
}

/* Margin bottom to accomodate shadow */
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background-color:#fdfdfd;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 1em;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  position:relative;
  padding: .2em;
  -webkit-border-radius: 0.3em;
  -moz-border-radius: 0.3em;
  -ms-border-radius: 0.3em;
  -o-border-radius: 0.3em;
  border-radius: 0.3em;
  color: #c92c2c;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

pre[class*="language-"]:before,
pre[class*="language-"]:after {
  content: '';
  z-index: -2;
  display:block;
  position: absolute;
  bottom: 0.75em;
  left: 0.18em;
  width: 40%;
  height: 20%;
  -webkit-box-shadow: 0px 13px 8px #979797;
  -moz-box-shadow: 0px 13px 8px #979797;
  box-shadow: 0px 13px 8px #979797;
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

:not(pre) > code[class*="language-"]:after,
pre[class*="language-"]:after {
  right: 0.75em;
  left: auto;
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #7D8B99;
}

.token.punctuation {
  color: #5F6364;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.function-name,
.token.constant,
.token.symbol {
  color: #c92c2c;
}

.token.selector,
.token.attr-name,
.token.string,
.token.function,
.token.builtin {
  color: #2f9c0a;
}

.token.operator,
.token.entity,
.token.url,
.token.variable {
  color: #a67f59;
  background: rgba(255, 255, 255, 0.5);
}

.token.atrule,
.token.attr-value,
.token.keyword,
.token.class-name {
  color: #1990b8;
}

.token.regex,
.token.important {
  color: #e90;
}
.language-css .token.string,
.style .token.string {
  color: #a67f59;
  background: rgba(255, 255, 255, 0.5);
}

.token.important {
  font-weight: normal;
}

.token.entity {
  cursor: help;
}

.namespace {
  opacity: .7;
}

@media screen and (max-width:767px){
  pre[class*="language-"]:before,
  pre[class*="language-"]:after {
    bottom:14px;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
  }
}

/* Plugin styles */
.token.tab:not(:empty):before,
.token.cr:before,
.token.lf:before {
  color: #e0d7d1;
}

dan letakan script dibawah ini diatas </body>

<script src='https://cdn.rawgit.com/deZige/JS/master/prism.js' type='text/javascript'/>

Cara Penggunaan

HTML yang dipergunakan untuk menampilkan dalam postingan seperti ini:

<pre class="language-xxx"><code class="language-xxx">

   Kode Anda Disini

</code></pre>

Tiap bahasa yang dipergunakan memiliki kelasnya masing-masing, seperti contoh penggunaanya dibawah ini:

HTML

<pre class="language-markup"><code class="language-markup">  

   Kode HTML Disini

</code></pre>

CSS

<pre class="language-css"><code class="language-css">

   Kode CSS Disini

</code></pre>

JavaScript

<pre class="language-javascript"><code class="language-javascript">

   Kode JavaScript Disini

</code></pre>

dan seterusnya dan seterusnya tergantung bahasa yang dipergunakan.

Sebaiknya tentukan bahasa dan style yang akan dipergunakan, diatas merupakan contoh saja dan sebaiknya script yang didownload (dipergunakan) diupload sendiri dan untuk stylenya bisa dimodifikasi sesuai dengan selera.

Semoga bermanfaat