1. Hack together your own display logic to format it as you see fit
2. Use the SyntaxHighlighter JavaScript library
3. Use Windows Live Writer with the Insert Code plugin (I discuss that here)
4. For WordPress, use the WP-Syntax plugin

Coincidentally, I had heard Scott Hanselman talking about how he does code formatting just a couple of days ago, in Hanselminutes #125, where he described how he posted code on his blog by putting it inside <pre></pre> tags, adding specific name and class attributes, and letting some JavaScript library do the formatting work. So I went to his blog, opened up a post with some code, and found my way to the SyntaxHighlighter JavaScript library. This is a very nifty library that handles formatting very nicely for a number of popular programming and scripting languages, and seemed to have a very easy implementation. So I decided to implement it for formatting code on my site.

Installing SyntaxHighlighter

The basic steps that you have to follow are:

1. Download the files
2. Upload the core JavaScript files, any JavaScript files related to languages that you would want to format, the swf and css files to somewhere on your server
3. Add references in your code to the different files

A very good and more detailed guide on how you can do this with your template can be found in this blog post by Fahd Sharif.

Displaying Code

Once you have the script, swf and css references integrated with your theme, you can post code using the following convention:

<pre name="code" class="langName">
Type your code here
</pre>

If you are doing this in WordPress, you will need to use the HTML editor to insert this. Language name reference is here.

Here is what is looks like in action:

public static class StringExtension {
  // Extension method to return first letter of a string
  public static string GetFirstLetter(this string str) {
    string val = (str.Length > 0) ? str.SubString(0,1) : "";
    return val;
  }
}

Fixing TinyMCE

After I first got this implemented in my theme, I had some problems getting it to work on actual blog posts. I would go to HTML mode in the editor, put in the <pre name=”code” class=”lang”>…</pre> syntax, go back to the Visual editor and finish my post, preview it, and no formatting would be applied. After checking the HTML source being output, I noticed that the name=”code” attribute of the pre tag was not being output. After some more investigation, I discovered that this attribute was being stripped by the TinyMCE editor when I switched from HTML to Visual editing modes.

It turns out that TinyMCE has its own built-in HTML validation that it employs when text is loaded into the Visual editor. Included in this is the ability to strip out attributes that are for whatever reason not “approved”. Tag:Name seems to be one of those.

One potential workaround would be to only use the HTML editor. Though I could do this, I like the Visual editor better when writing.

The alternative is to change the list of approved attributes for the pre tag so that name will no longer be stripped. After researching this a bit (references: 1, 2, 3), I did the following:

1. Open up /wp-includes/js/tinymce/tiny_mce_config.php
2. Go to approximately line 298
3. Make the following edit (what you are doing here is giving tinyMCE an explicit list of attributes that are acceptable for the pre tag):

// Original: $content .= $ext_plugins . 'tinyMCE.init({' . $mce_options . '});';
$content .= $ext_plugins . 'tinyMCE.init({extended_valid_elements : "pre[id|class|title|style|dir|lang|name|onclick|onkeypress]",' . $mce_options . '});';

1. Upload the new file
2. Clear your browser cache
3. Delete the /wp-content/uploads/js folder from the server
4. Do a hard-refresh of your editor page in WordPress

You should now be able to toggle back and forth between HTML and Visual editor modes in WordPress without losing the pre:name attribute necessary for SyntaxHighlighter to work. You will have to repeat this whenever you upgrade WordPress.

Why Not Just Use the Plugin

WordPress junkies at this point are muttering to themselves: why go to all this trouble? There is already a plugin that implements SyntaxHighlighter functionality and spares you all of this hard work. Here are the reasons why I chose to do this the hard way:

1. The plugin ditches the <pre> syntax for a custom syntax that looks like this: [sourcecode language="lang"]CODE GOES HERE[/sourcecode]. While this eliminates the pre:name stripping issue that I mentioned before, it introduces something that in my opinion is much worse: tinyMCE now gets rid of any spatial formatting that you are using. I like to indent my code when necessary. If I am typing in the pre tag, tinyMCE respects all of my spacing, and does not strip any of it out (that is the whole purpose of pre. Thus, I can save all of my indenting and spacing without any difficulties. If you are using a custom bracketed tag like the plugin does, tinyMCE strips a good deal of indenting and spacing, leaving code that just looks ugly.
2. The aforementioned code formatting issues carry over to the RSS feed as well. This way just works better.
3. The plugin includes all language JavaScript files. I don’t need to print Ruby code right now – why should I have to include the JS for it with my page?
4. Doing the implementation yourself gives greater flexibility in terms of using the different configuration options that are available with SyntaxHighlighter.
5. It is more fun this way

Update: Engfer lambasts me for editing wordpress core files that will be overwritten whenever wordpress is upgraded. Instead, he created a wordpress plugin that will allow you to override and define the allowable attributes for any elements parsed by TinyMCE. It is available for download here and is definitely a better way to go than manually editing files. Thanks!

Some of the features that attracted me are the ability to use one interface to publish on a number of different blogs at the same time, through a desktop client, without having to log in and out of different admin sites (I currently write or contribute to 4-5 different WordPress blogs with varying degrees of frequency, and the ability to post from one place makes it much easier to add content to different sites).

I was also curious to see how well Microsoft has gotten one of their products to interact with software of non-MS origin (and with PHP open source systems like WordPress). Compared with others, Microsoft very often seems to have a hard time opening up their products to others (just look at the new Live email vs. Gmail: Gmail lets you forward your email anywhere, and retrieve your email through any program using POP or IMAP, while Live email only lets you forward to an email address that is part of another Microsoft domain, like msn.com, hotmail.com, but other than that gives no options to extracting your email automatically outside of the Microsoft servers).

Here are some things worth noting so far:

Download and Setup: Easy and painless. Install went quickly. I entered the url for my homepage, my username and password. The software automatically determined that I was using WordPress, downloaded theme information and set itself up. From when I clicked download, I was ready to write to my blog using Live Writer in less than 10 minutes.

Web Preview: A very handy feature, allowing you to preview your post within your current blog theme. It actually did a very decent job of rendering the post the way it should (judging by Firefox). (This is in Web Preview mode, giving you a read-only snapshot of how your page would look. The Web Layout view mode however did not work so well for me. From what I gather, this is supposed to let you compose your post inside your blog theme. In my case, it put the title of my post inside the header, making it impossible to see what I was typing.

The Basic Stuff: Hyperlinks, pictures, trackbacks, basic editing functions – all of it works well, and is pretty easy to figure out. Though this is not something that will make a product shine in the market (even spell check is common nowadays, both in Firefox and WordPress), lack of these features (or a bad implementation) will kill a product from the get-go. (One WordPress caveat: although WLW includes native support for different tagging systems, it does not yet allow you to post tags to WordPress 2.3+. There are workarounds for this.)

Plugins: Although WordPress features a very powerful plugin system, it is most often used to improve the output of your blog, not the UI for entering posts. WLW plugins on the other hand are all centered on helping you get different types of data easily into your posts. I see this (as well as the automatic connectivity to different blogging systems and accounts) as the feature that will make this product really stand out. So far I have installed two different plugins (automatically replacing text formatting methods that I had previously had to code into my template, css and html):

Insert Code:

public static string HelloWorld() {
  string s = "Hello World";
  return s.ToUpper();
}

(Note: I first tried using the Insert Source Code Snippet plugin, but this was buggy and added a whole bunch of superfluous brackets. Afterwards I looked some more and found the Insert Code plugin by shahineo – easy to use and as you can see, produces some nice output).

Insert LTR Text:

זה יעזור לי הרבה לכתוב בעברית בבלוג שלי

All things considered, I am pretty satisfied with my first experience using Windows Live Writer. If you are reading this, it means that the post was also successfully posted to my blog through the interface (yay!). I think that I will be making it my primary blogging platform over the next couple of months. Now, if only I could use this to post to Newsvine…

A couple of days ago I created a blog from scratch (Telecommuterer.com). I would like to review all of the different steps that went in to this. All told, it took about two hours to go from nothing to a fully functioning blog with initial content posted. Though it is more difficult than using a hosted blog service, I think that if you would like to use your blog for anything more than casual use and you are up to the task, in the end it is worth it to invest a little bit of time and money in setting up the blog by yourself.

I am assuming here that you already have the concept for the blog in place and a general idea of the types of content you would like to host. I will describe the process using blogging software from WordPress.org as I think it is the best free software available for the task (with easy setup, great plugin and community support).

1. Get a Domain Name – Get a domain name for your blog. I use Go Daddy for all of my domain name purchases (though there are thousands of other providers that can do the same for you). For Search Engine Optimization (SEO) reasons, the shorter the domain name, and the closer it is connected to the main topic of your site, the better. If your first choices are taken, there are several services that will take your keywords and return a list of available names that might be good, like DomainsBot, DomainTools and DomainIt.
2. Set Up Hosting – Set up your hosting for the website. The main requirements are that that you use LAMP (Linux, Apache, MySQL, PHP) based hosting. There are thousands of services out there that will do this for less than $15 per month. If you are using a service that is not well known, I highly recommend checking out their reputation on the web before using them. I personally use MediaTemples (gs) GridServer service and DreamHost for my personal and client sites and would have no reservations recommending them to others.
3. Connect Your Domain – Set up a new Website at your webhost (they should have instructions on how to do this). Your host will give you their NameServer (or DNS) information. (This normally takes the form of something like ns1.hostname.com and/or an IP address). Take this information and go to the site where you bought your domain. On this site, in your domain management, change the Nameservers (or DNS settings) of the domain name to that which was given to you by your Web Host. After you do this, your domain name will now be connected to your website that is hosted on the servers of your Web Host.
4. Install WordPress – Many hosting services have tools that will do this automatically via server-side scripting. If that is available and they offer it with the most recent version of WordPress (currently 2.2), go for it. Otherwise, you can do it yourself in a few easy steps
   1. Download the most recent version of WordPress
   2. Extract the files from the zip or tar.gz file onto your computer. Upload them to your web host servers using FTP
   3. Using phpMyAdmin or whatever other database control interface your web host provides, set up a new mySql database for your site.
   4. Follow the rest of the instructions on the WordPress 5 Minute Install page (it really does take just five minutes)

   After going to the /wp-admin/install.php page on your site and following the instructions there, you should have a working WordPress blog set up on your domain name with the default template in place (and absolutely no content). Log into your admin section (you may want to bookmark the page at /wp-admin/ on your site), go to the Options section (and its different subsections) to set up your blog settings as you would like (don’t forget to set Permalinks if you have the capability and want to use them to create nice-looking urls for your posts.

   Now the real fun begins.

5. Set Up the Theme – If you are a real web-design pro and an expert with WordPress who can design their own theme from scratch, this doesn’t apply to you (and you don’t need to read any of this anyway). Otherwise, you should pick a theme for your site. There are hundreds of free WordPress themes out there to choose from. I recommend starting at the WordPress Themes viewer. It allows you access to test-drive hundreds of free themes and you can search based on features of the theme, layout options, etc. If it is too overwhelming, try filtering by theme features, using the list of most-downloaded themes (on the side of this page) or some of the themes featured here. When you have chosen a theme, download it to your computer and upload the files to your /wp-content/themes folder on your site. Go to the WordPress Admin > Presentation, and select your new theme.
6. Customize the Theme – If you are scared of CSS and HTML and are completely satisfied with the way that the theme works, you can skip this step. Otherwise, it is advisable to go into your theme files and customize sections of it. This is done to differentiate the look and feel of your site from other sites that may be using the same theme, as well as to change the locations and look of elements of the theme to suit your specific needs.Any customization work that you will do will take place in the different theme files, found in /wp-content/themes/theme_name/. The files that you are most likely to change are header.php, footer.php, sidebar.php, index.php and single.php for content and styles.css for style changes. You can read about the different types of theme files, how they work, template tags and pages, customizing templates and more on the WordPress Codex and Support forums.The potential for changes is practically endless. To give some ideas of things to change here is a list of changes that I made on my new site
   • I changed made the font size larger for all content text
   • Removed “sponsor links” on the theme that were pointing to indecent sites (see Matt’s essay on this for more info)
   • Changed the RSS links to Feedburner feeds, added an Email subscription link (through Feedburner). Moved these links to higher on the page
   • Changed some of the default, hard-coded text on the page
   • Added some tags that had been left-out by the theme author (go to next page/post, etc)
   • Changed the format and information displayed in the post info section on both the main page and the single post page
   • Added links to stats tracking services (I use both StatCounter and Google Analytics)

   Some other things you might want to change in the theme to really change the look of it is the header image, background colors, link colors and other visual elements. As you are changing the template files, upload them to your site to check on how your changes look and make sure that you haven’t broken anything.

7. Set up Plugins – As with the previous step, if you are completely satisfied with every aspect of your blog performance, you can skip this step (just remember to enable the Akismet anti-spam plugin that is included with the software). However, it is worth exploring the world of plugins if there is anything that you want to on your site that is not included by default or with the standard template tags. To set up any plugin, download its files, upload them to the /wp-content/plugins/ directory on your site, follow any specific directions that may be given with the plugin, go to the Plugins page in your site and enable the plugin. Some plugins work automatically in the background, some will require you to add tags to your template files (they should give instruction on how to do this).Plugins are hosted all over the internet, often on their author’s websites, and sometimes in centralized repositories. If you are in need of specific functionality, try searching for it (using keywords “[functionality] wordpress plugin” should give you some results if the plugin exists). Otherwise, try looking in some of the online repositories to get an idea of what is out there. Here is a list of the plugins that I used on my new site:
   • Akismet - Anti Comment Spam
   • Enhanced WP Contact Form - Easily add a contact form to your site
   • Ultimate Tag Warrior -Add tagging functionality
   • WP-Cache – Super Caching Functionality
   • JPF Add to Reddit, Seed Newsvine, Submit to Netscape and del.icio.us Bookmark This – Add links to social networking sites after blog posts

   Plugins can add lots of powerful functionality and totally change the way that you use your blog. They are one of the strongest features of WordPress and I highly recommend taking a look at what they have to offer.

You are now done setting up your blog (though as you use it more, you may decide to change are the template some more and add more plugins). Now all that’s left to do is to start adding content. Good luck!

That is why I am very thankful that I saw this: Upgrading WordPress via Shell.  I am a Windows guy without so much *nix scripting experience. Still if this could work, it would be a big time saver.

Fast forward 10 minutes. I enabled shell access with to my hosting account, logged in using PuTTY, went to the proper directory, ran the commands (very carefully), repeated for a second blog. Two blogs upgraded to 2.1.2 in 10 minutes, very little pain (awesome). (Oh yeah, and don’t forget to do a backup before running any scripts in your hosting account, or messing around with WordPress in any way. You have been warned).