Cara Menulis Source Code dalam Posting Blog

Hari ini, internet bisa dikatakan menjadi sumber ilmu yang sangat dijadikan referensi oleh banyak orang, bagaimana tidak, informasi apapun dapat dengan mudah diperoleh hanya dengan mengetikkan kata kunci yang dimaksud. Dalam waktu beberapa detik saja, berbagai informasi yang kita cari bermunculan dalam hasil pencarian. Termasuk diantaranya adalah informasi mengenai ilmu pemrograman baik komputer maupun web. Nah, jika anda adalah salah satu blogger yang ingin mencoba sharing mengenai sebuah source code dan ingin menuliskannya di posting blog, maka artikel ini mungkin cocok bagi anda karena disini saya akan berbagi mengenai cara menulis source code dalam posting blog baik yang menggunakan platform Wordpress maupun Blogger atau Blogspot.

Wordpress

Untuk menulis source code di postingan website atau blog yang berbasis Wordpress boleh dikatakan cukup mudah, karena di Wordpress telah disediakan plugin tambahan untuk pembuatan source code tersebut. Yang perlu kita lakukan hanya menambahkan tag berikut: [source code language="java"][/source code] di saat kita akan memposting sebuah source code. Contohnya begini:

[source code language="java"] 
public class HayAct extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
} [/source code]

Itulah tips cara menulis source code dalam postingan blog berbasis Wordpress. Selanjutnya, bagaimana dengan blog yang menggunakan Blogger.com? Sebenarnya caranya sama mudahnya, kita hanya perlu menambahkan sedikit kode ke dalam template blog dan melakukan parsing pada code yang ingin kita tampilkan dalam post blog.

Cara menulis source code dalam artikel di Blogger
Seperti yang telah saya katakan sebelumnya bahwa menulis syntax dalam artikel atau postingan di blog berbasis Blogger sama mudahnya dengan Wordpress. Yang akan saya bagikan disini adalah dengan menggunakan Google Prettify, mengapa? karena menurut saya cara ini paling simpel dan mudah dilakukan.

Berikut adalah langkah-langkah menggunakan Google Prettify di Blogger:

Langkah pertama
Tambahkan Google Prettifier Javascript Library ke dalam template blog anda. Letakkan kode tersebut tepat di atas tag </head>. Adapun kode yang harus dimasukkan adalah:

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js">
</script>

Bila kamu tidak paham cara memasukkan kode di atas di template blog, silahkan perhatikan gambar berikut ini.

Jika kamu sudah paham, silahkan skip bagian ini, dan bagi yang belum paham, silahkan perhatikan gambar di atas. Langkah-langkah menuju tampilan pada gambar di atas dalam template blogger adalah sebagai berikut :

• Di dashboard, perhatikan menu di sebelah kiri, klik pada bagian "Template"
• Selanjutnya anda akan dibawa pada halaman yang menampilkan template. Selanjutnya klik pada bagian "Edit HTML", maka anda akan dibawa pada halaman seperti yang ditampilkan dalam gambar di atas.
• Langkah selanjutnya adalah klik cursor agar berada di dalam kolom kode template, lalu tekan "Ctrl + F" untuk menampilkan form pencarian.
• Ketik "</head>" di kolom pencarian tersebut lalu tekan "Enter" maka anda akan menemukan kode "</head>" tersebut. Nah, paste lah kode library Javascript tadi tepat di atas kode "</head>" tersebut.

Selanjutnya, ketika anda ingin menuliskan source kode dalam post, anda harus memparsing dulu kode tersebut menggunakan HTML encoder, barulah hasil parsing tersebut di paste ke dalam posting blog dalam tag <pre>. Contoh, misalnya saya ingin menulis kode berikut ke dalam post :

<script>
     $(document).on('change','.coverimage',function(){
    files = this.files;
    size = files[0].size;
    //max size 50kb => 50*1000
   if( size > 50*1000){
    alert('Please upload less than 50kb file');
    return false;
   }
   return true;
  });
    </script>

Yang pertama kali harus anda lakukan adalah memparse kode tersebut dengan bantuan tools HTML Encoder, anda bisa klik disini.

Kode yang belum di parsing

Kode hasil parsing untuk di post blog

Setelah diparse, barulah kode tersebut anda masukkan ke dalam post editor Blogger pada bagian HTML, simpan kode hasil parse tersebut di antara tag <pre class="prettyprint"> ... </pre>, kode hasil parse disimpan di titik-titik.

Itulah tips sederhana mengenai cara menulis source kode atau syntax dalam post Wordpress maupun Blogger. Jika ada yang masih kurang dimengerti, silahkan tanyakan di kolom komentar.