This is how the <pre> tag should look like:
<pre name="code" class="c-sharp">

... some code here ...

</pre>

If your source code disappears after you edited it, check, in HTML mode, the attribute name. It is very probable that it was lost in Visual mode.

Put or Post

How to write unmaintainable code

Store a tree in a relational database

HTTPS internals

How spellcheckers work

Wrap your code in these tags:

[sourcecode language='css']

your code here

[/sourcecode]

Well, I did that, and the result did not look as shown on that page. At this point I had to start investigating. After saving the HTML page, I tried to figure out what makes the source code be nicely formatted. It turned out that the following lines are responsible:

These lines reference one stylesheet file and several JavaScript files. They were missing from the displayed HTML, so I tried to insert them into the posting itself. Remarkably, the <script> tag was left intact, but the <link> tag was removed. I had to somehow instruct WordPress to insert this specific <link> tag. And here is where “plugins” come handy because this is what they are designed to do: to insert specific files, both CSS and JavaScript in the HTML pages generated by WordPress.

Download here a sample HTML file that uses the highlighter JavaScript files independently of WordPress.

Searching for syntax highlighter in the plugins repository returns a few results. I installed what I thought will be the closest: Google Syntax Highlighter for WordPress and SyntaxHighlighter Evolved. It is important to mention that the latter seems to be derived from the former. The “evolved” version uses the
[sourcecode] tag (which gets converted to <pre>), whereas the “original” uses the <pre> tag.

This is how Google Syntax Highlighter for WordPress shows the code:

#button {

font-weight: bold;

border: 2px solid #fff;

}

and this is how SyntaxHighlighter Evolved does it:

#button {

font-weight: bold;

border: 2px solid #fff;

}

Between the two highlighting plugins I personally prefer the “original” Google Syntax Highlighter for WordPress version 1.5. Some other bloggers report the same preference (and also ask about how to downgrade from the “evolved” plugin). Maybe they will find this interesting: both plugins could co-exist (be active), as shown above; by using one tag or the other, one can choose the way the source code is displayed.

What the above mentioned WordPress tutorial omits to mention is that the [sourcecode] tag works ONLY after the SyntaxHighlighter Evolved plugin is installed. Well, it wasn’t really time wasted, since I learned something that may also help others.

References:

• SyntaxHighlighter
• Posting source code

As software professionals, we believe in readability and maintainability of the code, and in accountability in its development, from design to deployment, to support. We fully agree with the message of this article, that the software strength resides in the process of creating it. Although we understand that a bug-free software may be a dream, we strive to bring that dream to reality. We value elegant solutions, simplicity of design, yet we are comfortable with complex requirements and sophisticated scenarios.

So welcome to this blog. Check it out often, contribute, express your opinions, be active!