Cara Membuat Syntax Highlighter (Box Code) Keren Di Blog

- Oktober 31, 2014
advertise here
advertise here
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
Advertisement advertise here

4 komentar

avatar

ini fungsinya seperti bloquote yamas?

avatar

iya kang, tapi untuk hasil maksimal di gunakan buat script

avatar

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

avatar

mungkin butuh 2 jm untuk saya mempelajari ini
hehehe

nice info


EmoticonEmoticon

 

Start typing and press Enter to search