We come with the latest version 1.6, get this theme through our official site.

Manipulasi Syntax Highlighter Pada Tag Pre

Manipulasi Syntax Highlighter Pada Tag Pre
Syntax Highlighter
Syntax Highlighter
Bagi seorang blogger Syntax Highlighter ini adalah sebuah komponen penting pada pembuatan artikel, apalagi blog yang menyediakan tutorial yang begitu memuat banyak kode. Pada umumnya penggunaan Syntax ini digunakan untuk menuliskan kode pada artikel dengan menggunakan tag pre dan code yang dituliskan secara manual, seperti contoh dibawah ini:

<pre><code> //Kode HTML, CSS, Javascript, dan lain-lainnya disini </code></pre>

Syntax Highlighter ini bisa juga digunakan untuk kode PHP, Phyton, Ruby, Haml, dan masih banyak lagi.
Proses intalasi Syntax ini membutuhkan 2 langkah saja, Pertama-tama masuklah ke halaman editor HTML Template anda lalu pilih Edit HTML.
Setelah itu temukan kode ini:

]]></b:skin> atau kode <style>

Kemudian Salin kode CSS dibawah ini dan letakkan diatasnya:

/*
Theme Name Solarized Dark
Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull
*/

pre code {
  display:block;
  padding:0.5em;
  background:#002b36;
  color:#839496;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .lisp .string,
pre .javadoc {
  color:#93a1a1;
  font-style:italic;
}
pre .doctype {
  color:#df7c51;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .lisp .title {
  color:#89a252;
}
pre .css .class {
  color:#a7aa9b;
}
pre .number,
pre .command,
pre .string,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color:#628998;
}
pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .builtin,
pre .built_in,
pre .lisp .title,
pre .identifier,
pre .title .keymethods,
pre .id {
  color:#86aade;
}
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
  font-weight:bold;
}
pre .attribute,
pre .variable,
pre .instancevar,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .label {
  color:#a59355;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .diff .change,
pre .special,
pre .keymethods,
pre .important,
pre .subst,
pre .cdata {
  color:#b25a5a;
}
pre .tag .value,
pre .attr_selector,
pre .javascript .literal {
  color:#bfbf90;
}
pre .deletion {
  color:#dc322f;
}
pre .tex .formula {
  background:#eee8d5;
}
pre .tag {
  color:#a0a28b;
}
Setelah itu temukan kode ini </body> dan Letakkan Script ini diatasnya:
<script type='text/javascript' src='http://googledrive.com/host/0B22vSZUsgbQfcDJPbGhFZGh5d1U/highlight.min.js'/>
Klik Simpan Template

Sisanya bisa anda sesuaikan sendiri sesuai selera, ada banyak Pilihan Thema untuk Syntax Highlighter ini, untuk melihat demo Css bisa anda lihat disini, dan untuk kode CSSnya bisa kamu ambil disini, atau kamu mau bikin theme sendiri?

Demikian tutorial Memanipulasi Syntax pada tag pre, semoga bermanfaat.
Game Cover

Hi!! I know this has nothing to do with this post but you could teach us how to make a sitemap of your site like?


Rizky Kurniawan

Hi!! somehow I do not really dare to give the DTE sitemap belong to the public, Sorry

Unknown

nice post sir, thank you for sharing this tutorial ..


Anonim

Komentar di blokir karena mengandung element yang tidak diperbolehkan pada kolom komentar.

Yuk Diskusi

Kalau ada pertanyaan yuk kita diskusikan