Kode Program

Menulis Kode Program dengan Plugin SyntaxHighlighter

Kode ProgramDalam mengelola blog wordpress, untuk tingkat lanjut pasti akan sering menggunakan kode-kode program. Trik-trik pada kode program itu bisa saja di share ke orang lain. Tapi penulisan kode program agar mudah dibaca, perlu plugin SyntaxHighlighter. Maksudnya mudah dibaca itu untuk yang paham bahasa program. Kalo ga paham, ya tetap ga bisa 😀 .
Trus apa gunanya plugin SyntaxHighlighter? Plugin ini memudahkan kamu untuk menulis artikel yang memiliki code-code program. Cukup banyak bahasa program yang disupport. Daftar bahasa program yang disupport bisa dilihat di sini. Yuk kita coba cara menggunakan plugin ini. Pengguna WordPress.com juga bisa menggunakan plugin ini secara otomatis, jadi ga perlu install lagi, asyik kan.

Kebutuhan.

  1. Untuk pengguna WordPress self-hosted, Install dulu SyntaxHighlighter melalui Plugins » Add New. Ketik “SyntaxHighlighter” di kolom search plugin, trus klik search. Cari SyntaxHighlighter Evolved trus klik install. Jangan lupa untuk di aktifkan plugin-nya.
  2. Untuk pengguna WordPress.com, ga usah install apapun, karena sudah terinstall secara default.

Cara Menggunakan SyntaxHighlighter Pada WordPress Self-hosted

    1. Bikin post seperti biasa (Add New Post).
    2. Ubah dulu mode editor dari “Visual” ke mode “Text”.Untuk menggunakannya dalam artikel, kamu harus menggunakan Brush Aliases yang sesuai. Contoh, Brush Aliases untuk kode html adalah [html] maka di tulis
      [html]
      kode program di sini
      [/html]

Berikut contoh untuk Brush Aliases HTML [html]

   <meta charset="UTF-8" /> 		
   <link href="style.css" rel="stylesheet" media="all" type="text/css" />
   <meta name="viewport" content="width=device-width" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />

Berikut contoh untuk Brus Aliases ActionScript 3 [as3]

package com.adobe.air.crypto
{
  import com.adobe.crypto.SHA256;

  import flash.data.EncryptedLocalStore;
  import flash.utils.ByteArray;

Berikut contoh untuk Brush Aliases C++ [cpp]

#include
#include

class OgreSkeletonReader
{
  std::ostream& errors;

public:
  OgreSkeletonReader(std::ostream& e) : errors(e) {}
  void parse(XmlNode& root)
  {
  }

Daftar Brush Aliases bisa lihat di sini

Cara Menggunakan SyntaxHighlighter untuk WordPress.com

    1. Bikin post seperti biasa (Add New Post).
    2. Ubah dulu mode editor dari “Visual” ke mode “Text”.Untuk menggunakannya dalam artikel, kamu harus menggunakan Code Language yang sesuai.
kode disini
[⁄code]</pre>
<ol>
	<li>Code language diganti sesuai dengan jenis bahasa program. Untuk melihat bahasa program apa aja yang sudah di support, bisa liat <a href="http://en.support.wordpress.com/code/posting-source-code/" target="_blank">di sini</a>.</li>
</ol>
Berikut contoh untuk code language “html”
<pre>
<div></div>
<meta charset="UTF-8" />
<div></div>
<div></div>
	<link href="style.css" rel="stylesheet" media="all" type="text/css" />
<div></div>
<div></div>
<meta name="viewport" content="width=device-width" />
<div></div>
<meta name="apple-mobile-web-app-capable" content="yes" />
<div></div>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<div></div>

Berikut contoh untuk code language “ActionScript3”.

package com.adobe.air.crypto
{
  import com.adobe.crypto.SHA256;

  import flash.data.EncryptedLocalStore;
  import flash.utils.ByteArray;

Berikut contoh untuk code language C++ “cpp”

#include
#include

class OgreSkeletonReader
{
  std::ostream& errors;

public:
  OgreSkeletonReader(std::ostream& e) : errors(e) {}
  void parse(XmlNode& root)
  {
  }
Advertisements

3 thoughts on “Menulis Kode Program dengan Plugin SyntaxHighlighter

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s