Cara Memasang Syntax Highilghter di blogger

CARA MEMASANG SYNTAX HIGHLIGHTER DI BLOGGER

Hai, kali ini saya akan berbagi tutorial lagi tentang cara memasang syntax highlighter di blogger. Mungkin sudah ada yang tau tentangsyntax highlighter tapi mungkin ada juga yang belum tau. Jadi, syntax highlighter ini adalah semacam plugin yang digunakan di dalam website atau blog untuk membuat semacam code editor seperti tutorial saya sebelumnya tentang cara membuat segitiga dengan html dan css. Di situ terdapat code html dan css yang terlihat seperti di dalam code editor seperti notepad++ dan lain sebagainya.

Nah, dengan adanya syntax highlighter ini tentu akan mempermudah dan memperindahsebuah website atau blog yang berisi tentang tutorial yang membahas
pemrograman, mulai dari java, c++, html, php, dan lain sebagainya.

Terus bagaimana caranya memasang syntax highligter? Sebenernya cara pemasangannya sudah ada di situs resminya di sini. Tetapi untuk pemasangan di blogger sendiri belum ada, jadi saya akan berikan langkah-langkahnya untuk memasang syntax highlighter di blogger. Berikut adalah langkah-langkahnya.


Pertama, buka link ini, klik skip ad, kemudian copy semua kode css yang ada.
Kedua, masuk ke akun blogger, dan masuk ke template. Setelah itu klik edit html. Cari kode</b:skin> dan paste kan kode css yang sebelumnya telah dicopy di atas kode ]]> </b:skin>

Setelah itu, copykan kode berikut ini di atas kode </head>.

view plainprint?

1. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript"></script>  
2. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"></script>  
3. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"></script>  
4. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"></script>  
5. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"></script>  
6. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"></script>  
7. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"></script>  
8. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"></script>  
9. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"></script>  
10. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"></script>  
11. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"></script>  
12. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"></script>  
13. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"></script>  

Masih belum selesai. Selanjutnya kita akan menggunakan file javascript di atas dengan cara copy kode di bawah ini sebelum kode </body>

<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Nah, kita sudah selesai memasang syntax highlighter di blogger. Sekarang tinggal bagaimana menggunakan syntax highlighter tersebut. Caranya cukup mudah. Cukup ketikkan code berikut di dalam postingan (dalam kondisi html bukan compose).

view plainprint?

1. <pre name="code">...Your html-escaped code goes here...  
2. </pre>  
3. <pre class="php" name="code">echo "I like PHP";  
4. </pre>  

Nah, seperti itu. Ketika yang kita tuliskan adalah kode php, maka classnya php, kalo yg kita tulis kode java, classnya diganti java. Mudah kan? Kira-kira seperti itulah tutorial singkat kali ini tentang cara memasang syntax highlighter di blogger. Semoga dapat membantu.

Share on :

Tweet