How to post source code for viewing in WordPress.com

WordPress.com allow you to post source code of some languages.

The supported languages include:

• bash


• cpp


• csharp


• css


• delphi


• html


• java


• jscript


• php


• python


• ruby


• shell


• sql


• vb


• xml

What you need to do is to wrap the source code between sourcecode tag. For example:

[sourcecode language='python']

your code here

[/sourcecode]

How to embed source code in a blog

To embed source code inside blogger blog, like in the picture above, I use a css box like below:

.code {
font-family: ‘Courier New’, Courier, monospace;
white-space: pre;
line-height: 1.4em;
margin: 1em 0;
border: 1px dashed #aaa8a8;
padding: 0.5em 0 0.3em 0.5em;
font-size: 100%;
color: #000;
overflow: auto;
max-width: 100%;
/*max-height: 400px;*/
}

To use it just call the class named ’code’ using div.

<div class="code"> The source code goes here! </div>

The tab will be preserved. In order to limit the height of the box, remove the comment (”/*” and “*/”) from the last line, and set the desired height.

/* max-height: 400px; */

For some reason, in IE, the text will be wrapped instead of displaying the scroll bar. However, it works just fine inside Firefox and Opera. If you have suggestion on how to solve this problem, don’t hesitate to leave a comment.