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 😀