Tag: posting sourcecode

Kategori
Wordpress Plugins

Easy-Posting a Source Code in the WordPress with SyntaxHighlighter

Case Study : Using SyntaxHighlighter plugin to write source code in the WordPress post.

Requirements : WordPress bundle, download here. and SyntaxHighlighter, download here.

Sometimes, we will need to write a sourcecode in our WordPress. This is if we write some tutorial about some programming language. WordPress it self actually already provide some facilities to write a sourcecode, for example :

<code> your code here </code>

Actuallt, this facilities run well in showing your code, but maybe you wont like it because it isn’t quite good-looking. Too small, and have a same colour for every code. Just like this,

If you really isn’t like with this, may you can use this plugin. Syntax Highlighter. Write a source code with this plugin will give some advantages,

  1. There are numbering in front of every line of code –> This will help you if you want to give an explanation in every code.
  2. Colorfull code
  3. Standard font size
  4. Customizable (self-settingi). For example, you can give a highlight in the code.


Step 1 : Syntax Highlighter Installation

  1. Download syntaxhighlighter plugin from here
  2. Start the installation. Login to your WordPress, you will be redirected in to dashboard page
  3. Choose Plugins menu in the left side WordPress page.
  4. Choose Add New tab
  5. In the Install Plugin menu, choose Upload tab.
  6. Browse file zip syntaxhighlighter plugin from download, then click Install Now
  7. So it will show install conformation success like the image below.
  8. Click Activate Plugin to activated the plugin .


Step 2 : Using the Plugin

  1. Create a new post with click menu Posts – Add New
  2. Type this sample in the HTML editor page (NOT the Visual Editor page). See the red circle in the picture,

  3. Just like that. Choose publish and you will see the picture below,

This plugin support for actionscript3, bash, coldfusion, cpp, csharp, php, css, xml, javascript, java, perl, sql.. till phyton 😀 For the full language which supported by this plugin, go here.

Step 3 : Plugin Customization

With this plugin, you can customize the appearance of sourcecode with several optional option. One option is that you can optionally give highlights on certain lines of code. For example,

Code –>

Result–>

And there are many optional choices that you can try it yourself. You can find a wide selection of optional here.
Happy trying 😀 happy WordPress-ing 😀

Kategori
Wordpress Plugins

Posting Source Code dalam WordPress MUDAH dengan SyntaxHighlighter

Studi Kasus : Menggunakan plugin SyntaxHighlighter untuk menulis kode program dalam postingan WordPress

Requirements : WordPress bundle, download here. and SyntaxHighlighter, download here.

Adakalanya kita akan membutuhkan untuk menulis kode program (sourcecode) dalam postingan di WordPress kita. Hal ini misalkan ketika kita menulis suatu tutorial untuk bahasa pemrograman tertentu. WordPress sendiri sebenarnya telah menyediakan fasilitas untuk menuliskan kode program seperti ini yaitu dengan menggunakan syntax,

<code> your code here </code>

Sebenarnya fasilitas tersebut dapat berjalan dengan baik dalam menampilkan kode anda, namun mungkin anda tidak akan begitu menyukainya karena tampilannya yang… tidak begitu bagus. Kecil kecil, dan berwarna sama untuk semua kode. Seperti ini,

Kalau anda memang tidak menyukai hal tersebut, mungkin anda harus mencoba plugin WordPress satu ini. Syntax Highlighter. Menulis kode program menggunakan plugin ini akan memberi keuntungan diantaranya,

  1. Terdapat penomoran didepan setiap baris code –> Hal ini memudahkan apabila anda ingin memberi penjalasan terhadap kode tersebut.
  2. Berwarna-warni –> Jadi akan lebih jelas bagian kodenya, mana yang merupakan variabel, mana yang komentar, dll
  3. Ukuran font standar –> Enak dibaca. Tidak terlihat njlimet seperti kode program biasanya 😀
  4. Bisa dikustomisasi (diatur sendiri) dengan banyak pilihan opsional. Misal, code bisa diberi highlight.


Step 1 : Instalasi Syntax Highlighter

  1. Download plugin syntaxhighlighter dari sini
  2. Mulai instalasi. Login ke halaman wordpress anda, maka anda akan diarahkan ke halaman dashboard
  3. Pilih menu Plugins pada samping kiri halaman WordPress anda.
  4. Pilih tab Add New
  5. Pada menu Install Plugin, pilih tab Upload.
  6. Browse file zip syntaxhighlighter plugin hasil download, kemudian klik Install Now
  7. Maka akan ditampilkan konfirmasi sukses instal seperti gambar dibawah.
  8. Klik Activate Plugin untuk langsung mengaktifkan plugin tersebut.


Step 2 : Penggunaan Plugin

  1. Lakukan posting baru dengan memilih menu Posts – Add New
  2. Ketikkan contoh berikut ini pada halaman HTML editor (bukan halaman Visual Editor). Lihat gambar dilingkari merah,

  3. Sesimple itu saja. Pilih publish dan anda akan melihat tampilan seperti berikut,

Untul lebih lengkapnya plugin ini mendukung bahasa pemrograman mulai dari actionscript3, bash, coldfusion, cpp, csharp, php, css, xml, javascript, java, perl, sql.. hingga phyton 😀 untuk lebih lengkapnya plugin ini mendukung bahasa apa saja lihat disini.

Step 3 : Kustomisasi Plugin

Dengan plugin ini, anda juga bisa mens-kustomisasi tampilan source code dengan berbagai pilihan opsional. Salah satu pilihan opsional adalah anda bisa memberi highlight pada baris tertentu pada code. Contoh,

Code –>

Hasil –>

Dan masih banyak pilihan opsional yang bisa anda coba sendiri. Anda bisa mengetahui berbagai pilihan opsional tersebut di sini.

Selamat mencoba 😀 happy WordPress-ing 😀