Jumat, 31 Oktober 2014

Cara Membuat Syntax Highlighter (Box Code) Keren Di Blog

Cara Membuat Syntax Highlighter (Box Code) Keren Di Blog, Cara Pasang Syntax Highlighter (Box Code), Cara membuat Kotak Html keren pada 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

Hary Muhlia

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

4 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