Introduction

Using the plug-in is easy. The steps that follow take you through formatting some code and inserting it into your blog.

Details

Step 1

In WLW, in the Insert panel, click the new Source code... entry. You will then see a screen like this:

Step 2

This screen shows a preview of your code and allows you to change the settings.

If you don't see anything in the preview, it's because you had no text in your clipboard. Simply hit the Edit... button and add the code that you want formatted.

Select the Syntax Highlighter radio button at the top. This sets the rendering engine used to render the highlighting and formatting. Now we're going to insert this highlighted snippet of code as text into our blog post. Click the Insert as Text button.

Back in Windows Live Writer, hit the Preview tab at the bottom. You should see something like the following screen

Note: actual output will vary depending on the theme of your blog. Most of the time, SyntaxHighlighter output will not display correctly in WLW - not until it's published. See this page for some tips on how to get around this limitation of WLW

Step 3

In this step, we're going to change the highlighted text for an image and apply some image effects. Switch back to the Edit tab and single click the code:

Click the Edit code button. In the screen that follows, select Insert as image. You'll then see the properties screen change to this:

This screen shows the properties that are available when inserting code as an image. It allows various effects to be added and removed.

We're now going to add a Perspective View effect. From the Actions dropdown-menu, select Perspective View. Change the Angle to something, say around 22 degrees. Change the Orientation to TopToBottom. You should have something like the following on the right hand side of WLW:

Now, add a Glow effect and change the colour to Red:

Now, switch back to the Preview tab. You should see something like this:

Step 4

We've now got a nice looking code snippet with a few effects.

In this last step - we're going to modify the code and see the output image update in near real-time.

Switch back to the Edit tab and select the code snippet by single-clicking it. Now click the Edit code... button again.

The window that appears shows the preview and allows you to change the settings. Click on the Show line numbers check-box. Notice that the preview and the output image has changed and now shows line numbers:

We're now going to change the code. Click the Edit button. You should see an editable popup window overlay the preview.

Change the code to this:

You should see everything update.

Now just click the Insert as Image button again and you're finished.