Paste Code – Live Writer Plugin To Paste HTML/Code

by Brett on March 6, 2010

I recently started using Windows Live Writer and I believe it is currently the best application out there for quickly posting to a blog. However, I found one issue where I could not easily paste HTML and other code and decided to develop a plugin to address it.

If your in a hurry here is the download link:

DOWNLOAD: Paste Code For Windows Live Writer (2003 Downloads)

The Issue

Below is an example of some code I would like to paste into Live Writer.

<html>
<head>
	<title>Hello World</title>
</head>
<body>
	Hello World
</body>
</html>

When I try to paste the above code in the “Edit” window. It appears correctly on the screen but in reality Live Writer added content to my code. When I view the source I receive the following:

&lt;html&gt;
  <br />&lt;head&gt;
  <br />&#160;&#160;&#160; &lt;title&gt;Hello World&lt;/title&gt;
  <br />&lt;/head&gt;
  <br />&lt;body&gt;
  <br />&#160;&#160;&#160; Hello World
  <br />&lt;/body&gt;
  <br />&lt;/html&gt;

This is very close to how I desire to have the code formatted. However, the major problem is it inserted a bunch of <br /> characters. It does make sense that it inserted these <br />’s since in most cases we want line returns to have breaks but this is not the case when pasting source code.

Next, if I paste the code in the “Source” window the problem is the code is taken as actual source. This means that the code will not be seen on the screen but instead will be interpreted by the browser. If I then swap back and forth between the “Edit” and “Source” windows my code gets reformatted to be the following:

Hello World

Which is obviously not what I wanted.

Solution: A Plugin

To address the issues stated above I put together a plugin that will allow pasting code in either the “Edit” or “Source” windows. It will replace special characters so that the code will be viewable and will not insert extra HTML (like <br />’s).

Below is a screenshot of the plugin in action:

sshot-2010-03-06-[3]

This plugin will automatically take the code that exists on the clipboard and display it in the “Code Snippet” section and give the ability to edit the code before pasting it.

It also has the “Before Code Snippet” and “After Code Snippet” text areas. These two text areas allow defining code to wrap around your code snippet. By default the two box’s will have <pre> and </pre>. Using either a <pre> or a <textarea> is required in order to have the formatting display correctly. If the content of “Before Code Snippet” and “After Code Snippet” is changed it will be remembered the next time the plugin is used.

Once insert is clicked in the plugin the code will be added to your post in Windows Live Writer and will be formatted correctly.

DOWNLOAD: Paste Code For Windows Live Writer (2003 Downloads)

Icing On Top

With this plugin in place we can easily paste code and not worry about the formatting. However, it is very beneficial to have the source code displayed on your blog with syntax highlighting. I do know that there are a few plugins for Windows Live Writer that will apply syntax highlighting to code. However, I do not love this for the following reasons:

  1. Will not work when writing an article from blog’s admin page.
  2. Will not easily allow changing the Syntax Highlighting to a different algorithm. There are a ton of different Syntax Highlighting plugins for blogs and every once in a while I like to upgrade to the the latest and greatest.
  3. Will not work if I decide I want to move away from Windows Live Writer (that will never happen, right?).

For my blog I am using the syntax highlighter developed by Alex Gorbachev. There is also a nice plugin that quickly installs this syntax highlighting in a wordpress blog. With the paste code plugin for Windows Live Writer in combination with syntax highlighting I can quickly paste code and achieve the following results:

sshot-2010-03-06-[4]

Previous post:

Next post: