Cara Membuat Syntax Highlighter (Box Code) Keren Di Blog

Cara Membuat Syntax Highlighter (Box Code) Keren Di Blog - Assalamualaikum sahabat semuanya, sudah lama saya tidak membuat post tentang Tutorial Blog. Pada pertemuan sekarang ini, saya akan mencoba sharing Cara Pasang Syntax Highlighter (Box Code). Syntax Highlight adalah sebuah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. 

Dengan menggunakan Syntax Highlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa markup (markup language) atau bahasa pemrograman (programming 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. Berikut di bawah ini bagaimana cara membuat atau memasang Syntax Highlighter (Box Code) di Blog.

Syntax Highlighter (Box Code)

  • Pertama Copy Paste Kode Java Script dibawah ini, sebelum kode </head> 
<script gapi_processed="true" src="https://apis.google.com/js/plusone.js" async="" type="text/javascript"></script><script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript">
</script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript">
</script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript">
</script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript">
</script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript">
</script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript">
</script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript">
</script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript">
</script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript">
</script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript">
</script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript">
</script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript">
</script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript">
</script>
  • Kemudian copy kode CSS Syntax Highlighter tepat di atas kode ]></b:skin>

  • Cari kode </body> dan letakkan kode di bawah ini sebelum kode </body>
<script language='javascript'> dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script>
  • Simpan dan langkah selanjutnya membuat posting diblog
  • Gunakan script di bawah ini setiap anda psting kode
<textarea name="code" class="c#" cols="60" rows="10">
KODE YANG AKAN DITAMPILKAN DILETAKKAN DISINI
</textarea>
  • Posting dan Selesai 

Oke terimakasih atas kunjungan anda di blog ini, semoga tutorial tentang  Cara Membuat Syntax Highlighter (Box Code) Keren Di Blog bisa bermanfaat buat anda yang sedang mencari-cari cara seperti ini. Sekali lagi terimakasih dan Salam Blogger..

Sumber : http://bloggertutorialblog.blogspot.com/2012/01/menambahkan-syntax-highlighter-blog.html
Terima Kasih Atas Kunjungan Anda
Judul: Cara Membuat Syntax Highlighter (Box Code) Keren Di Blog
Ditulis Oleh Hary Muhlia
DILARANG KERAS Copy Paste 100% artikel ini!!! Artikel ini dilindungi dengan setifikat DMCA.com Protection Status Protected, silahkan edit minimal 60% adalah hasil narasi anda sendiri dan jangan lupa sertakan link yang menuju ke artikel Cara Membuat Syntax Highlighter (Box Code) Keren Di Blog ini sebagai sumbernya. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya

Bagikan ke

Iklan Anda
Berkomentar dengan
atau
silahkan tentukan pilihan sobat!

6 komentar:

  1. ini fungsinya seperti bloquote yamas?

    BalasHapus
    Balasan
    1. iya kang, tapi untuk hasil maksimal di gunakan buat script

      Hapus
  2. Waduh , jquery nya banyak amat .
    Bisa membuat blog jadi lambat loading tuh .

    BalasHapus
  3. mungkin butuh 2 jm untuk saya mempelajari ini
    hehehe

    nice info

    BalasHapus
  4. Terimakasih atas artikelnya.... :)

    BalasHapus
  5. itu scripnya banyak banget, bisa berpengaruh sama load webny gak ya mas?

    BalasHapus

1.Jangan lupa koment yah kawan,untuk mempererat silaturahim.
2.Komentar Tanpa Moderasi. Yang mau pasang Link,gunakan NAME/URL atau Open ID.
3.Silahkan kawan becanda,asal dengan etika.
4.Terimakasih kunjungan dan komentarnya kawan,Mohon maaf jika belum bisa berkunjung balik
5.Tetap tersenyum meskipun sedih.

© 2013 Harysukasuka - All Rights Reserved | Disclaimer | Privacy Policy
Template by IdleCreative
Back to Top