Cara Membuat Syntax Highlighter di Blog

Cara Membuat Syntax Highlighter di Blog - Ficri Pebriyana
Cara Membuat Syntax Highlighter di Blog - Syntax Highlighter adalah fitur editor teks yang menampilkan teks, terutama teks yang berupa kode dalam berbagai macam warna dan huruf yang berbeda sesuai dengan jenis kode itu sendiri. Fitur syntax highlighter sangat cocok digunakan untuk kode pemrograman atau bahasa markup karena akan lebih mudah dibaca terutama oleh manusia.

Apa Fungsi Syntax Highlighter ?

Banyak fungsi yang terdapat dalam syntax highlighter ini salah satunya yaitu untuk memberi warna yang berbeda kepada setiap kode dalam bahasa pemrograman ataupun markup, dengan warna yang berbeda di setiap kategori kode terebut maka manusia akan lebih mudah membacanya itulah fungsi syntax highlighter yang paling utama, fungsi yang lainnya untuk mempercantik tampilan kode atau blockquote dalam blog juga bisa.

Bagaimana Cara Membuat Syntax Highlighter di Blog ?

Pada kesempatan kali ini blog Ficri Pebriyana akan menjelaskan bagaimana cara membuat syntax highlighter pada blog, untuk memasang syntax highlighter di blog apakah blog Anda membagikan seputar tutorial blog yang setiap artikelnya membagikan kode pemrograman seperti kode CSS, HTML, JavaScript dan lain sebagainya ? Jika Ya, maka alangkah baiknya menggunakan syntax highlighter agar lebih mudah membaca setiap kode yang dibagikan.

Menambahkan syntax highlighter di blog memang akan membuat blog menjadi lebih keren lagi khususnya pada tampilan kode atau tampilan blockquote, namun ketika sudah menggunakan atau memasang kode syntax highlighter Anda tidak perlu lagi menambahkan kode <blockquote>...ISI KODE...</blockquote> tetapi akan menjadi <pre><code>...ISI KODE...</code></pre> jadi fungsi blockquote tidak perlu digunakan lagi saat menulis artikel. Langsung saja bagi Anda yang ingin menambahkan kode syntax highlighter pada blog silahkan baca tutorial mengenai cara membuat syntax highlighter di blog dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Copy kode css dibawah ini, lalu Paste diatas kode ]]></b:skin> atau </style>
/* Syntax Highlighter */

pre,i[rel="pre"]{padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:11px;color:#839496;font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;line-height:1.4em;position:relative;white-space:pre;word-wrap:normal;white-space:pre;overflow:auto}
pre.line-number{background:#2f3741 url(http://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none}
pre.line-number:after{content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute}
pre[data-codetype="CSS"]{border-left-color:#5fbbba}
pre[data-codetype="HTML"]{border-left-color:#4fc1eb}
pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}
pre[data-codetype="JQuery"]{border-left-color:#99c262}
pre.line-number[data-codetype]:before{content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:12px;text-transform:uppercase;background-color:#41749f;color:white}
pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}
pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}
pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}
pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
#comments code{color:#bbbb6d}
pre code{padding:0!important;color:#a3a49a;background:none!important;border:none!important;display:block}
pre .line-number{float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#2DCFF2;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#E6D90C}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#EB4F4F}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#03C425}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#1B6FC3}
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,pre .css .pseudo{color:#D94CEA}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}

5. Cari kode </head>
6. Copy kode javascript dibawah ini, lalu Paste diatas kode </head>
<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>

7. Klik Simpan Template

Catatan :
- Anda bisa mengganti kode css diatas dengan css yang ada disini Github.
- Anda bisa mengganti warna setiap kategori kode disini Kode Warna HTML.

Bagaimana Cara Menggunakan Syntax Highlighter di Blog ?

Seperti yang sudah saya katakan diatas bahwa setiap kode <blockquote> diganti dengan kode <pre><code> sehingga kode <blockquote> di setiap artikel yang telah Anda tulis harus diganti dengan kode <pre><code> agar syntax highlighter ini aktif di blog Anda. Untuk cara menggunakannya lebih jelasnya dibawah ini :

Menggunakan Syntax Highlighter Yang Salah

<pre><code>...Masukan Kode Disini...</pre></code>
Letak kesalahan pada </pre></code> yang seharusnya </code></pre>

Menggunakan Syntax Highlighter Yang Benar

<pre><code>...Masukan Kode Disini...</code></pre>

Sekian artikel mengenai Cara Membuat Syntax Highlighter di Blog. Kurang lebihnya mohon maaf. Semoga Bermanfaat...

33 Responses to "Cara Membuat Syntax Highlighter di Blog"

  1. boleh nih dicoba tipsnya supaya tampilan blog jadi lebih menarik ;)

    ReplyDelete
  2. menarik juga yah sob.. perlu dicoba dan langsung diterapkan pada blog masing masing heheh :)

    ReplyDelete
    Replies
    1. diterapkan atau tidak sih terserah masing-masing :D
      yang penting saya sudah membagikan tutorialnya...

      Delete
  3. keren sob..ijin make script nya buat blog tutorial ane..salam kenal
    "manfaat bersama"

    ReplyDelete
  4. oiya gan kalo css harus di konversikan dulu ga ? @@,
    back komeng ditunggu gan :-d
    aha-blogs

    ReplyDelete
  5. Terima kasih sob, izin make yah.....

    ReplyDelete
  6. Ketemu juga nih artikel..
    Makasih buat postingannya gan..
    Salam Blogger

    ReplyDelete
  7. wah makasih banget nih.
    sudah coba sana-sini. cuma ini yang memuaskan :-d

    ReplyDelete
  8. Mantap, demonya seperti di blog ini ?

    ReplyDelete
  9. Apakah engga bikin blog saya berat gan

    ReplyDelete
  10. keren artikelnya mas, jempol, maaf ini blognya pake WP apa blogspot ya? :D

    ReplyDelete
  11. kok diblog saya gk bisa

    ReplyDelete
    Replies
    1. Gak bisa gimana ?
      Coba simpan kode css nya paling atas diantara kode css yang ada ada di blog punyamu itu

      Delete
    2. berhasil mas,terima kasih ya

      Delete
  12. maaf,mau nanya lagi saya sudah memasang syntax highlighter tapi kok pas saya mau masukan kode ke postingan kok tiba tiba gk ada kodenya

    ReplyDelete
    Replies
    1. gak ada gimana ya ?
      coba deh baca lagi cara penggunaannya diatas...

      Delete
  13. Salahnya gimana mas kalau tag peneutupnya seperti yang mas jelaskan diatas..? Resikonya apa yah mas..?

    ReplyDelete
    Replies
    1. penggunaan syntax higlighter ini kan diawali dengan tag pre kemudian disusul dengan tag code, nah jika salah penempatan biasanya akan tidak berfungsi misalnya tidak akan berwarna, dan tidak ada resikonya juga :D

      Delete
  14. [ASK] cara memberikannya judul gimana ??

    ReplyDelete
  15. makasih gan ini yang saya cari..

    ReplyDelete
  16. udah saya terapin dan re share di blog saya mas, makasih
    tapi kok hasilnya gk kayak yg di blog nya mas?
    background highlighternya jadi putih, gimana tuh?

    ReplyDelete
    Replies
    1. cara menggunakannya udah bener belum tuh, awas kebalik antara pre dan code

      Delete
  17. Wahhh yang kotak nya agak keren jadi keren banget. Thank you ya |o| :-d :-bd :) ^_^

    ReplyDelete
  18. Tapi tag phpnya kagak muncul yah bro,, "" piye toh ???

    ReplyDelete
    Replies
    1. mungkin bisa di konversi dulu pakai tool "Konversi Kode" di atas kotak komentar ini, hehe :D

      Delete
    2. oh iyah yah,, sampe lupa,,, heheh,, kalau misal pake pastebin,,, itu kira2 bakalan berat gak sih ??,, makasih yang bro...

      Delete
    3. kalau pastebin boleh saja diakan posisinya hanya URL doang, jadi tidak mempengaruhi loading blog

      Delete
  19. wah langsung jadi gan.. ijin share ya gan :D

    ReplyDelete

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting