You can just wrap it in <code> or <pre> tags and play with CSS to make it more readable. But it is not enough usually. Many of us are accustomed to have code highlighting for better readability.

I have seen and tried a dosen of solutions myself: simple “code-to-html” like CHIP, some simple JavaScript solutions like Code Prettifier or mature like GeSHi.

There are server and client side solutions, ASP, PHP or JS based. You can choose one best for you.

As a WordPress user, you may also be interested in easy integration via WP plug-in (GoSHi wrapper).

I have used the following criteria in my search:

• it should support many modern languages (SQL, C++, C#, HTML, JavaScript, Delphi, …)
• it should be easy to integrate in WordPress, do not use tags and structures which will violate XHTML compliance requirements (I prefer to have my pages to pass W3C XHTML validation).
• it should be easy to use within BBcode-like WYSIWYG editor
• have some basic Copy/Paste/Print support

I did not much care about server or client side implementation.

My choice was a SyntaxHighlighter by Alex Gorbatchev. Few things with original code were:

• no out of the box support for WordPress
• tag syntax used by default was breaking W3C validation

Ok, choice was to find someone already adopted it or create my own plug-in. Lucky for me there was one already. It was using BBCode to wrap the snippet but it did not address an issue of the invalid tags.

But it was easy to address also – in original code “name” is used to specify that <pre> does represent the code snippet.

Since I am not using this tag for anything else simple replacement in the source code would do the trick:

1. download and install plug-in
2. locate shCore.js and look for the following line FindTagsByName(elements, name, ‘pre’);
3. replace it with FindTagsByName(elements, null, ‘pre’);
4. save, upload
5. Update (01/05/2009): With release of latest plug-in version, one more adjustment is required in the WP plugin itself:
   • Locate and Open syntaxhighlighter.php
   • Locate line “$content = str_replace( $match[0], ‘<pre name=”code” class= … “
   • If you are using any WP cache plugins, clear your cache
6. add code into your blog (this is how it is seen in the editor)
   

   [sourcecode language=’delphi’]var
     MyImageList: TImageList;
     MyImage: TImage;[/sourcecode]

   and you will get it displayed nicely like shown here.

PS. what you also would get is an ability to print/copy/view the code in easy and convinient way.

Enjoy.

I have installed beta 2 of Internet Explorer 8 and I have to adjust my CSS settings to work as if I would use Mozilla browser. Finally IE is closer to standards then ever.

Other then that everything appears to be working fine. But if you notice anything, please let me know.

Another thing was a test against Google Chrome. Overall everything is working.

I have also tested my main web-site and it appears not requiring any adjustments.

I noticed a funny thing. If you are using just one tab then combined size of the application is smaller then IE (57Mb versus 30.5Mb). Yes, both are still in pre-release stage and some size optimization could be done still, but it is just an observation.
I am saying combined because if you check your WTM you would notice 3 chrome.exe accompanied by 3 iexplore.exe. When you start opening more tabs, then more instances will appear. Would Google sue Microsoft over it, or would it be Microsoft for “similar” behaviour. Mozilla is yet to take the same approach so it may be late for the party of virtualization. Even though Chrome may considered to be an alternative to IE or Mozilla, it acts similar.

By the way, internally WordPress admin console does require adjustments to work properly in IE 8. But I think it would be addressed soon.

At this point first stage of testing is concluded.

PS. It is worth to mention that IE 8 actually breaks admin panel, at least with latest version of WP. And the reason is that IE now acts more like FF and special ie.css which is included for admin page is no longer required. Hopefully this will be resolved soon.

From what I can see, everything is running fine and it appears to be faster, but if you encounter any problems, please let me know.

You now can associate Gravatar with your email address and it will appear next to all your comments. Gravatar is a free service which is now incorporated into WordPress, you can create association by visiting web-site above.

As a result here is for you to try is an actual widget which you can see used to show some of my gallery photos.
You can download widget here – Gallery 2 Widget.

Bellow are steps to follow in order to start using it.

• Download a ZIP file from location above
• Unpack it and upload folder into your WordPress plugin folder
• Visit your WordPress Admin concole and enable Plugin under “Plugins” section
• Now go to Presentation/Widgets. You will see a new widget available – “Gallery.2″. If you need more then 1 widget to be used in your blog, change a number of available Gallery.2 widgets to desired.
• Drag “Gallery.2 widget from available list onto your sidebar and go into options by clicking a small button on the widget bar
• You could specify SideBar widget name, location of your gallery and choose appearance of the ImageBlock in your blog. Description for items is self-explanatory otherwise go to your Gallery.ImageBlock configuration page to find more details about the options.

Enjoy.

I have started with the original code for Text Widget and adjusted it to include such restriction.

It has superseded my IFrame solution discussed in prior post and works well except that CSS is not yet applied.

What has been demonstrated by this little project:

• how to register your own sidebar widget
• how to support multiple instances of the same widget in the sidebar
• how to manage widget options from popup options window in Widget  Manager section of your Blog Admin Panel
• how to store/read widget options
• how to make your widget properly appear at the sidebar
• implement some basic user rights manager

If you’d like to use it in your blog, source code is available here – WordPress PHP Text Widget.

I hope this little example would help you started with Plug-in development for your WordPress Blog.

WARNING: Any code injections allowed by dynamic content comes with possible security risk. Please be cautious about what you allow to be executed by the PHP code specified in the widget. I would strongly suggest avoiding use of external sources you have no control over.

I was looking for the widget which will allow me to integrate an ImageBlock from my Photo Gallery into a side bar and I have not find something which will satisfy me all the way.

If you are familiar with Menalto Gallery 2 Engine, then you might know what ImageBlock is a simple preformatted PHP code snippet which you can put in your site’s PHP code to inject HTML showing random (or other kind) of item from your photo collection. In addition you need to include reference to the stylesheet file into the header.
All configuration options are translated into query parameters which are then used by the snippet.
Good, nice, easy… except that WordPress does not allow to use PHP inside your Text Widget, neither there is some very simple widget available around which will allow you do such thing easy way. I am sure there is one but I have not found one up to this moment.

As a result I end up using IFrame for some time with external page embedded. Not very nice solution since IFrame is not to XHTML validator friendly when it comes to transparency and is not auto-sizable without dancing with JavaScript…

After finishing some design work with my blog layout I have decided it is time to create my first Side Bar Widget for WordPress and it happened to be a PHPText.