Menulis Kode Program dengan Plugin SyntaxHighlighter

Dalam 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



➡ Baca juga Cara Membuat Child Theme




Cara Menggunakan SyntaxHighlighter untuk WordPress.com



Bikin post seperti biasa (Add New Post).
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)
  {
  }

			

			
			
Rate this:
Share this:
Twitter
Facebook
More
Print
Email
Reddit
LinkedIn
Pinterest
Tumblr
Pocket
Like Loading...


	
Related