Cara membuat Syntax Highlighter pada Blogger

Pada kesempatan kali ini saya akan membagikan cara membuat SyntaxHighlighter. Apa itu Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks terutama source code dalam berbagai warna dan font sesuai dengan kategori istilah. Gunanya, untuk memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language).

Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source (seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.

UPDATE 7 Maret 2014: Tampilan seperti di blog ini ,silahkan ganti jika anda menyukainya
Untuk lebih jelas Lihat gambar di bawah ini untuk penampakan SyntaxHighlighter
SyntaxHighlighter
Cara pemasangannya silahkan ikuti tutorial dibawah ini:
1. Masuk Blogger
2. Pilih template dan Edit HTML
3. Masukan kode CSS dibawah ini diatas kode ]]></b:skin> atau </style>
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: #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: #7195a3;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
color: #569dcf;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #aa985a;
}
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: #509a55;
}
pre .deletion {
color: #dc322f;
}
pre .tex .formula {
background: #073642;}
4. Cari Kode </head> dan pastekan kode dibawah ini tepat di atas kode tadi
<script src='https://googledrive.com/host/0B8zY82qas755TXNaZ0FGWUVPSEE' type='text/javascript'/>
<script>hljs.initHighlightingOnLoad();
</script>
5.UntukMengaktifkan tag pre pada komentar silahkan tambahkan diatas kode </body>
<script type='text/javascript'>
$(&#39;i[rel=&quot;pre&quot;]&#39;).replaceWith(function() {
    return $(&#39;<pre><code>&#39; + $(this).html() + &#39;</code></pre>&#39;);
});
</script>
6. Simpan Template
Cara penggunaan Syntax Highlighter simple dan mudah 
<pre><code>...-kode HTML, CSS, JavaSript di Sini-..</code></pre>
Pilihan CSS pada Syntax Highlighter ini bisa kunjungi Disini. Semoga berhasil :)

103 Responses to Cara membuat Syntax Highlighter pada Blogger

  1. Replies
    1. pny sy codenya tdk pnjg, knp code diatas pnjg y? jd bingung... @@,

      Delete
    2. tadi komentarnya di bawah :D gpp sist panjang pendek intinya bisa buat syntax highlighter kata kang @Adhy banyak jalan menuju Roma =D

      Delete
  2. Wah bgini ya caranya... thanks infonya

    ReplyDelete
  3. cocok tuk blog tutorial.., makasih sob! *smile

    ReplyDelete
  4. hemmmhhh banyak juga yah kang codenya,,,tapi tidak ada salahnya untuk dicoba nih,,terimakaish untuk tutornya,,,

    ReplyDelete
  5. Dengan menggunakan Syntax Highlight, code nya jadi mudah di fahami ya...

    ReplyDelete
  6. Harus edit HTML ya. waduh makin tambah berat aja dong blog saya ^_^ kirain ada yang langsung di parse di posting

    ReplyDelete
  7. Kode yang panjang itu di copy ya mas

    ReplyDelete
    Replies
    1. di cut juga bisa sist ^_^ kalau mau di pasang

      Delete
  8. banyak banget ya ...aku ijin nyimak saja dulu ya...
    keep happy blogging always...salam dari Makassar :-)

    ReplyDelete
    Replies
    1. silahkan mas Hari.. salam juga dari pekalongan :-d

      Delete
  9. coding.. kerjaan 'lumayan' niih :D
    nice share broo ^^

    ReplyDelete
  10. Sementara nyimak dulu ya mas
    Lain waktu...bisa di coba :)

    ReplyDelete
  11. wah panjang banget yah sob kode-kodenya, tapi saya nggak ngerti kalau urusan kode-kode seperti ini hehe...

    ReplyDelete
  12. lihat banyak kode kek gitu, bikin pusing kepala... :p

    ReplyDelete
  13. saya cukup nyimak saja mas...penegn bisa tapi apa daya sulit belajarnya

    ReplyDelete
    Replies
    1. silahkan mas agus ,jangan lupa bawa kopinya :D

      Delete
  14. waow.. banyak ya kodenya.. nyimak aja ya mas,saya kurang paham dengan beginian :D

    ReplyDelete
  15. wah boleh juga nih :D ijin bookmark buat belajar soal web programming :)

    ~ Blogwalking Andrekocak Blog ~

    ReplyDelete
  16. Replies
    1. Makasih gan

      ~ Blogwalking Andrekocak Blog - Ribuan Backlink Gratis ~

      Delete
  17. banyak tapi bagus nih buat blog atau website khusus Tutorial , makasih infonya kang :-b

    ReplyDelete
    Replies
    1. Sama2 kang Waludi.. makasih kunjungannya.. :D

      Delete
  18. lumayan membuat kepalan Pusing.. @@,

    ReplyDelete
  19. Banyak juga ya mas kodenya, padahal saya suka pusing kalo lihat kode yang banyak hehe

    ReplyDelete
    Replies
    1. pegangan mas kalau pusing.. ya sambil belajar pusing tidak apa2 asal bisa :D

      Delete
  20. keren gan..



    salam blogwalking dari maftuhi.com

    ReplyDelete
  21. keren gan?? termakasih., hehehehe

    ReplyDelete
  22. mas,, mawan belajar utek utek kode ginian butuh berapa lama ? #penasaran

    ReplyDelete
    Replies
    1. template buatan mas saeful sist kalau mau download nih linknya saeful13.blogspot.com/2013/12/bcalm-responsive-blogger-template.html :)
      kalau masalah utek2 seminggu,hee baru belajar edit :D

      Delete
  23. Mantap banget nih mass,, Salam Sukses ^_^

    - Blogwalking Ballxcode -

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. ini cocok buat blog tutorial ya kang

    ReplyDelete
  26. Mantab kang , izin praktekin dulu deh ,, ^_^
    Ohiya akun hantu nya kena suspend kang , nanti saya buatin yang baru ..

    ReplyDelete
    Replies
    1. silahkan kang di praktekin :) iya makasih kang :D

      Delete
  27. wah bahasanya terlalu tinggi mas, saya nggak paham soal syntax ini :)

    ReplyDelete
  28. ありがとうございます。。
    てもそれわむずかしいですようね?

    ReplyDelete
    Replies
    1. sama-sama diq, makasih udah mau datang :p

      Delete
  29. Salam para blogwalking Kunjung Balik ya http://allterbaru-ashock.blogspot.com/

    ReplyDelete
  30. mantap gan.. sudah saya terapkan di blog saya dan berhasil.
    tapi kalau boleh tanya membuat garis berwarna disebelah kirinya dimana gan>
    http://rahmatkriz.blogspot.com

    ReplyDelete
    Replies
    1. sudah di perbaharui itu sudah ada garis sebelah kiri, atau bisa tambahkan border-left:4px solid #40627E; ganti aja sesuai selera

      Delete
  31. ada yang bernomor gak sob... d share ya

    ReplyDelete
  32. mas, kok scroll vertikalnya ga muncul ya?

    ReplyDelete
    Replies
    1. dikasih jarak mas contoh
      <pre style="height: 300px; overflow: auto;"><code> kode css,js,html</code></pre> kurang lebih seperti itu pada height:300 bisa ganti sesuai yang di inginkan

      Delete
  33. mas, apakah ini bisa untuk menampilkan source code Java, C#, C++ dan lain-lain? Mohon bantuannya

    ReplyDelete
    Replies
    1. bisa mas.. untuk caranya sama seperti di atas :)

      Delete
    2. tapi di kode css pre nggak ada data-codetype untuk Java, C dll mas? soalnya blog saya menjelaskan source code program software engineering, nggak ttg html/css/js

      Delete
    3. COBA PAKAI cara ini sob mungkin bisa membantu http://billboyz.blogspot.com/2014/01/10-koleksi-syntaxhighlighter-keren-di-blogger.html dari blog sebelah :)

      Delete
    4. oke mas saya coba dulu, thanks before :) (y)

      Delete
    5. sama-sama :) jangan lupa mampir lagi =D

      Delete
  34. Gan ko punya ane coding nya ga muncul ya?
    Tapi box css nya udah muncul, cuma isi coding nya ga ada entah kemana.
    mohon bantuannya juragan.
    terima kasih.

    ReplyDelete
    Replies
    1. apa semua pemasangan kode sudah benar, atau bisa salah dalm parse kode htmlnya mas

      Delete
  35. untuk cara memangilnya gimana mas ...apa hanya perlu menggunakan blockquote atau dengan pre kode misalnya <pre bla bla bla mohon bantuanya mas

    ReplyDelete
    Replies
    1. untuk pemasangan sangat simpl silahkan gunkan <pre><code>kode HTML/CSS/JAVASCRIPT</code></pre>

      jika ingin mmberikan scroll pada script yang panjang gunkan <pre style="height: 300px; overflow: auto;"><code>kode HTML/CSS/JAVASCRIPT</code></pre> silahkan angka 300 ganti ssuai selara berapatinggi yang ingin digunakan,

      Delete
  36. Maksih bro, kalau ngedit temanya gimana yah bro?

    ReplyDelete
    Replies
    1. untuk edit tema bisa ganti beberapa Css na bro

      Delete
  37. bro, pas gw ketikkan kode html pada pre-nya,

    malah yang tampil html yang sebenarnya, bagaimana cara nampilin kode htmlnya saja bro ?

    ReplyDelete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔