Cara Membuat Syntax Highlighter Di Blogger

Malem Bro!!

Bagi pembaca sekalian yang bergelut didunia blogger mesti tidak asing dengan kode-kode html, jika anda mempunyai software text editor maka bergembiralah, karena software tersebut sangat berguna saat editing kode-kode html dan sejenisnya, salah satunya adalah perbedaan warna antara fungsi yang satu dengan fungsi yang lainnya.

Nah, disini muncul pertanyaan, bagaimanakah cara share kode html yang keren pada blogger? Malam ini saya marathon nulis beberapa tips tutorial yang berkaitan dengan blogger.

Langsung saja, berikut tutorialnya;

1. Pertama, untuk menghindari hal-hal yang tidak diinginkan, Backup dulu template blogger sobat.
2. Setelah itu, buka Template => Edit HTML, dan Copy semua kode CSS yang ada di link ini, pastekan sebelum kode </b:skin>,
3. Lalu, copy pastekan kode berikut sebelum tag </head>
   

   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>

4. Copy pastekan kode berikut sebelum tag </body>
   

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

5. Simpan template blogger nya.
6. Dan sekarang, Syntax highlighter telah siap digunakan, untuk menggunakannya cukup menyisipkan tag <pre></pre> ke postingan dalam mode HTML,
   

   <pre name="code">
   ...html-escaped milik anda ditaruh disini...
   </pre>
   
   <pre name="code" class="php">
   echo "Aku Suka PHP";
   </pre>

7. Untuk memudahkan dalam konversi bahasa tulisan ke HTML, anda dapat merujuk ke Quick Escape ini.
8. Dan disini adalah bahasa-bahasa yang didukung oleh atribut <class> Syntax highlighter ini.

Demikian, semoga bermanfaat.

________________________________

Sumber : stackoverflow.com