Rich Newman

February 17, 2012

Creating Code Listings in WordPress using Visual Studio

Filed under: code, Visual Studio, Wordpress — Tags: , , — richnewman @ 12:19 am

In WordPress it has historically been quite hard to paste code listings into the editors and get them to look good.  There are some plugins that try to do it, but none of them seem to work very well with code copied out of Visual Studio.

One option for creating code listings from Visual Studio is to paste an HTML version of the code into the HTML editor in WordPress.  In the past I’ve done this by pasting the code from Visual Studio into Word, saving as HTML, and then running a little bespoke program to tidy up the mess that Word makes of the resulting HTML.  All that was a pain.

Things are much easier in versions of Visual Studio from 2010 onwards, where you can use options in Microsoft’s Productivity Power Tools.  This is a Visual Studio extension (accessible via Tools/Extension and Updates…). In all versions it has an option to copy code as HTML, amongst other things.

Unfortunately with Visual Studio 2010 and 2012 there’s no easy way to paste as HTML directly into the HTML editor in WordPress.  If you try you just get the text.

The trick here is to first paste into something that expects an HTML listing and will show all the tags as a result.  You can do this by adding an HTML page to your Visual Studio project and pasting into there.  The full steps to do this in any version of Visual Studio from 2010 onwards are below.

However, note that there’s an even easier way to do this in Visual Studio 2013 only (at the time of writing).  If you install the Productivity Power Tools 2013 in Visual Studio 2013 it puts an option on the edit menu ‘Copy Html Markup’.  If you select some code and then use this option you can paste directly into the HTML editor of your post in WordPress, and if you then switch to the visual editor you should see that the code is copied correctly.

The steps to get a code listing from Visual Studio 2010 or 2012 into WordPress in the same format as it is in Visual Studio are:

  1. Install the Productivity Power Tools in Visual Studio using Tools/Extension Manager.
  2. Add an HTMLPage item to your Visual Studio project
  3. Select the code you want to copy and hit Ctrl-C
  4. Go to your HTMLPage, right-click, Paste Alternate (not Paste: there should be a second paste option on the context menu).  This should show you the text with the HTML tags.
  5. Ctrl-A, Ctrl-C to select and copy the listing with the tags.
  6. Go to the HTML editor (‘Text’ tab at top) of your post in WordPress and paste the code in there at the appropriate point.

Below is an example of the results of this with a short method.  First what the end result looks like:

        static void MyMethod(int x, string y = "Hello"string z = "World") 
        {
            Console.WriteLine(y + " " + z + ": " + x);
        }

Then what the underlying HTML looks like.  You can tweak the generation of this in the Productivity Power Tools options but going with the defaults works fine for me:

<pre style="font-family:Consolas;font-size:13;color:black;background:white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">static</span>&nbsp;<span style="color:blue;">void</span>&nbsp;MyMethod(<span style="color:blue;">int</span>&nbsp;x,&nbsp;<span style="color:blue;">string</span>&nbsp;y&nbsp;=&nbsp;<span style="color:#a31515;">&quot;Hello&quot;</span>,&nbsp;<span style="color:blue;">string</span>&nbsp;z&nbsp;=&nbsp;<span style="color:#a31515;">&quot;World&quot;</span>)&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#2b91af;">Console</span>.WriteLine(y&nbsp;+&nbsp;<span style="color:#a31515;">&quot;&nbsp;&quot;</span>&nbsp;+&nbsp;z&nbsp;+&nbsp;<span style="color:#a31515;">&quot;:&nbsp;&quot;</span>&nbsp;+&nbsp;x);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</pre>
About these ads

1 Comment »

  1. Excellent solution, thanks! I’ve been spending too much of my evening trying to get a decent copy from Visual Studio into WordPress – I thought this would be much easier :) too bad Word wasn’t much help, unfortunately seemed to mess up code listings for no apparent reason *sigh* anyway, thanks for this post!

    Comment by Jason — June 26, 2013 @ 1:36 am


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Shocking Blue Green Theme. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

Join 83 other followers

%d bloggers like this: