WordPress Tips : Writing Code in Your WordPress Blog Posts

How to include or write code in your wordpress blog post? The code can be anything, from HTML and CSS to programming language code like Java or even Mathematical formula. If you put the code as it is in the wordpress post, wordpress will convert that into ugly looking text and will mess up the layout.

There are plenty of wordpress plugins available to solve this issue. Commonly known as syntax highlighter , these plugins will do good job in identifying the keywords and line numbers. Many of these plugins will show keywords in different color and special characters in different color.
But how to achieve this without plugins? Let us discuss about using code inside your post without the help of any of these plugins. If you know bit of HTML and CSS then it is very easy to do this.

Write your own simple syntax code highlighter using HTML and CSS

We will utilize the two HTML Elements to showcases the code exactly in your blog post.

The <code> element</code>

The <code> elemnt represents a fragment of computer code. It can be anything like an XML, HTML, JavaScript or even a documet URL or file name. Generally speaking <code> element can be used where phrasing content is expected.

The <pre> element.

The <pre> element represents a block of preformatted text. Inside the
<pre> element the structure is represented by typographic conventions rather than by elements.
<pre> will preserver the spaces and other formatting.
<pre> element is best suited for including fragments of computer code, with structure indicated according to the conventions of that language. Browsers render preformatted text in a fixed-width font, should not collapse white-space, and should not wrap long lines.

A combination of <pre> and <code> elemnts can be used to display the code fragments. To display HTML entities you can use the following HTML characters.

1
2
3
4
5

< = &lt;
> = &gt;
/ = &#47;  	
" = &#34;
' = &#39;

etc..
The <pre> and <code> tag can be stylized using CSS based on your need.
An example CSS styles given below. This will display your code inside a box with font color based on your style class selection.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

pre {
	border: solid 1px blue;
	font-size: .95 em;
	margin: 10px;
	padding:10px;
	background: #E6E3E6
	width: 85%;
}	
.java  {
	color: #000099;
}
.php  {
	color: #FF6699;
}
.html  {
	color: #32AC20;
}

Here we have defined special CSS classes for languages like java ,php, html etc. If you know your wordpress theme template structure you can add the above CSS styles to your style-sheet file. Or you can add the styles in your header.php files after the element.

Using the above CSS we can display three different programming language code, Java code, PHP code and HTML code.Please not the usage of class attribute of <code> element. For each language we are using appropriate style class.

1
2
3
4
5
6
7
8

 <pre>
 <code class="java">
	class HelloWorld {
	    public static void main(String[] args) {
		System.out.println("Hello World!");
	    }
	}
</code>

This will display as below

class HelloWorld {

    public static void main(String[] args) {

        System.out.println(“Hello World!”);

    }

}

You can use the above example to create more attractive styles. When you want to include a code fragment to your post, just add
<pre><code class=”xxxx”> Your Code Fragment </code></pre>
replace “xxxx” wih the style class (java,php,html etc as in our example above) and “Your Code Fragment” with the actual code.