Share via

Copy Code in HTML format with Visual Studio 2010

  • Article

Today Jason has announced the Visual Studio 2010 Productivity Power Tools – a set of VS 2010 extensions that we released to complement and enhance the built-in 2010 features. You can either install the Pro Power Tools from here or just go to the Tools –> Extension Manager and type "Pro Power Tools" in the search box:

image

For the Pro Power Tools, I wrote a feature to copy formatted source code to clipboard in HTML format. The traditional VS editor only copies the plain text and RTF formats to clipboard, and there are numerous tools available to convert RTF to HTML. With the Pro Power Tools installed, pressing Ctrl+C or otherwise copying the code editor selection to clipboard, it will place the formatted and colorized HTML fragment on clipboard, alongsize the plain text and RTF format.

Then you can paste the code anywhere HTML is supported, such as Windows Live Writer:

image

Ctrl+Shift+V (Paste Special), Alt+K (Keep Formatting) and Enter to insert the colorized code to Live Writer.

In a future version of the power tools I will introduce customization – you will be able to fully control what HTML gets generated:

  1. Prepend any HTML to the code fragment
  2. Append any HTML to the code fragment
  3. Prepend any HTML before every line of code
  4. Append any HTML after every line of code
  5. Include line numbers and the format string for them
  6. Replace the space with  
  7. Replace the carriage return line feed with <br />
  8. Emit <span style="color: blue">void</span> vs. <span class="keyword">void</span>

Also, the current version has a bug: Cut (Ctrl+X) doesn't place formatted HTML to clipboard, only Copy does. I forgot to hook up the Edit.Cut command and never got around to fixing it. I'll fix it for the next release though.

Hope you like it, and as always, your feedback is appreciated!

P.S. Here's the sample code formatted using the extension:

         private static string IntersperseLineBreaks(string text)
        {
            text = text.Replace("\n\r", "\n \r");
            return text;
        }

You can View Source on this page, look for IntersperseLineBreaks and view the HTML that I generate. In a future release you will be able to customize the output of the tool, but for now this is what it defaults to.

Comments

  • Anonymous
    June 07, 2010
    Great Kirill. Fantastic job... :) I'll use it a lot in my blog - www.leniel.net.

  • Anonymous
    June 08, 2010
    Thanks Leniel ;)

  • Anonymous
    June 09, 2010
    Shouldn't there be some kind of credit to Colin Coller here?  Unsung hero, these things matter.  Link: copysourceashtml.codeplex.com

  • Anonymous
    July 19, 2010
    The comment has been removed

  • Anonymous
    July 19, 2010
    May I suggest the ultimate productivity enhancement that I have submitted to the visual studio dream wish queue for years now? Let's say you have "foreach(int i in y) {}". Now pretend the implementation between the {} is really long - like more than a page. Wouldn't it be nirvana if mousing over the closing } showed a tooltip of "foreach(int i in y)" so you knew just what the } was actually closing without having to scroll up, adding a guideline, or whatever? This must be like splitting the atom, it never makes the short list. Color me "still dreaming".

  • Anonymous
    August 10, 2010
    Not exactly about this VS extension, but related anyways. I got everything working ok until i should do "paste special" -> "keep formatting". I'm using live writer to do this, and there is no option for "keep formatting", only the first two options. Anyone have any ideas?

  • Anonymous
    August 11, 2010
    juarola - can you please shoot me an e-mail through my blog Contact page so I can reply to you personally and help you investigate this issue?

  • Anonymous
    August 11, 2010
    The comment has been removed

  • Anonymous
    August 11, 2010
    nobugs - absolutely, several people have done a fantastic job before, so I'm not even trying to claim anything. Huge kudos to all those folks, of course.

  • Anonymous
    August 23, 2010
    Why do I have to paste into an application "where HTML is supported" like Windows Live Writer? Can't we just get a menu option "copy as HTML" and then be able to paste into notepad or anything else?

  • Anonymous
    August 25, 2010
    Thank you very much. This is a wonderful feature. This feature saved me from using thrid party java script based code formatting scripts, which makes the sites awfully slow

  • Anonymous
    August 25, 2010
    Great! For a future version you could consider the option to copy the code formatted with BB Code as well. :-)

  • Anonymous
    November 06, 2010
    I would also very much like an option that enables pasting the HTML in notepad for example

  • Anonymous
    November 21, 2010
    Nice, but would be even better if it copied the background color as well.  I use a dark theme and it fails to set the background color on the pre tag.  Not a big deal, I can do it manually but would be nice if it took that in to account.

  • Anonymous
    December 15, 2010
    Does not work under my installed VS2010 Ultimate. Tried uninstalled and then reinstalling. No matter I copy code from the IDE and paste into notepad, HomeSite, WeBuilder and simply get the text uncolorized except in MS-Word I get the colorization as without the "Copy To HTML" Will check back in your next release. Any ways thanks for all your efforts! kevindotsdotgallagheratdordotstatedotordotus

  • Anonymous
    December 15, 2010
    Hi Kevin, thanks for trying HTML Copy out! It doesn't put the HTML text onto clipboard's text format, otherwise if you'd copy-pasted code from VS to VS, it would accidentally paste HTML, thus making Copy Paste code impossible. Instead, it leaves a plain text version of the selection on clipboard, but instead puts the rich HTML in a parallel, HTML format. If you paste in Word, and select Paste special, you can select which one to paste: HTML, RTF or plain text. My tool is only useful to paste into programs that support "Paste Special" - choosing which of the clipboard formats to paste. Live Writer should work, Word, Outlook, TFS. I'm working on another release where you'd be able to push a special button to "Copy HTML markup to clipboard as plain text". Hope this clarifies! Kirill Osenkov

  • Anonymous
    December 31, 2010
    Thanks for your tools. Now the oneNote can get the colorful code now. PLEASE clarify the method about how to use it in future.

  • Anonymous
    January 29, 2011
    The comment has been removed

  • Anonymous
    March 01, 2011
    Great addition! However a Copy as Html option should be provided we we can paste code anywhere like note pad or even other blogs where one doesn't use Live Writer to write blogs or forums where code does not get formatted. Also some documentation on the "Paste Special" Ctrl+Shift+V, functionality on the Power Tools page would help since this is not very obvious. I've asked a question there with no replies and finally found your blog.

  • Anonymous
    March 01, 2011
    Great addition! However a Copy as Html option should be provided we we can paste code anywhere like note pad or even other blogs where one doesn't use Live Writer to write blogs or forums where code does not get formatted. Also some documentation on the "Paste Special" Ctrl+Shift+V, functionality on the Power Tools page would help since this is not very obvious. I've asked a question there with no replies and finally found your blog.

  • Anonymous
    March 04, 2011
    I am running Win7 + VS2010 in Hyper-V virtual server (yeah, SharePoint my love). On host system I am running Windows Live Writer. I am connected to Win7 dev machine using RDC. The problem is - when I copy code from VS2010 to Live Writer then HTML portion of the code seems missing. Plain text and RTF come over RDC nicely. Please fix this issue in next release.

  • Anonymous
    October 19, 2011
    The comment has been removed

  • Anonymous
    December 03, 2011
    <3 YOU! I really needed this!