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>

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.

13 komentar:

  1. 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?

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

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

    BalasHapus
    Balasan
    1. anda bisa berbahasa indonesia?

      Hapus
    2. aku mesthi bisa, basa negara mangsa piyambak ora bisa

      Hapus
    3. saya pernah ke indonesia, saya suka sekali makanan yang namanya bakso itu, itu makan enak sekali, dari indonesia kan?

      Hapus
    4. Seperti Obama ngomongnya -_-

      padahal enggak :v

      Hapus
    5. play around to your blog is the best experience of my life, here I am in suguhkan icon icon quite charming and very elegant look, nice :-d

      Hapus
    6. thank you for your compliment on this blog, your blog is also great :-bd

      Hapus
    7. My blog should be treated again, have not been considered in terms of appearance, so that visitors are still rare to my blog, your blog is different. how not?

      Hapus
    8. actually this is not entirely my layout that makes this theme, the theme of this blog comes from the theme of the conversion of one of the famous theme provider sites.
      I just convert and add some features only. ;)

      Hapus
    9. I do not care who the actual maker of this template, but the creative ideas of the pack rizky that makes this blog really friendly on the eyes .. :)

      Hapus

Blog ini tidak menerima komentar via OpenID atau Anonim.
Link aktif akan secara otomatis terhapus oleh sistem.
Untuk memasukkan link dengan aman, gunakan kode [url=http://sites.com]Teks Link[/url]
Untuk memasukkan kode, gunakan kode <i rel="code">Kode Kamu</i>
Untuk memasukkan kode yang panjang, gunakan kode <i rel="pre">Kode Panjang Kamu</i>
Untuk menyisipkan gambar, gunakan kode [img]Url Gambar[/img]
Untuk memasukkan title, gunakan kode <b rel="h4">Title kamu ...</b>
Untuk memberikan efek huruf tebal pada teks, gunakan kode <strong>Teks Kamu ...</strong>
Untuk memberikan efek huruf miring pada teks, gunakan kode <em>Teks Kamu ...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

Emotikon
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p*