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.

Edit 2016:  Wordpress themselves have now solved the problem to some extent by allowing basic code blocks.  If you precede your code with ‘code language=”csharp”‘ in square brackets, and put ‘/code’ after it, also in square brackets, then you get something that looks as below:

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

This still doesn’t work particularly well with a direct paste from Visual Studio: the code gets a little mangled with pre tags and some ‘Snippet’ text.  Easiest is to first paste into notepad and then recopy from there to ensure you are just pasting plain text.  Also it obviously isn’t quite as nice as the original code in Visual Studio.

The original article below explains how you can use the Productivity Power Tools to copy an HTML version into your article, although this is a little more involved.  This works in Visual Studio 2013 and 2015 as well as the versions listed below.

 

In Visual Studio from 2010 onwards, 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>

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

Blog at WordPress.com.

%d bloggers like this: