Copy Code in HTML format with Visual Studio 2010


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 (23)

  1. leniel says:

    Great Kirill. Fantastic job… 🙂 I'll use it a lot in my blog – http://www.leniel.net.

  2. Kirill Osenkov says:

    Thanks Leniel 😉

  3. nobugz says:

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

  4. At freakin' last. Thank you. says:

    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". – Jerry Nixon

  5. JerryNixon says:

    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".

  6. juarola says:

    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?

  7. Kirill Osenkov says:

    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?

  8. Kirill Osenkov says:

    Jerry – absolutely, we've taken note and will try to implement something in the future. Unfortunately this is low priority, so I can't promise we'll get to it soon, but it's definitely in the list.

  9. Kirill Osenkov says:

    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.

  10. wondering says:

    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?

  11. Charith Gunasekara says:

    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

  12. Tomas says:

    Great! For a future version you could consider the option to copy the code formatted with BB Code as well. 🙂

  13. also wondering says:

    I would also very much like an option that enables pasting the HTML in notepad for example

  14. Jon says:

    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.

  15. Kevin Gallagher (Oregon Department of Revenue) says:

    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

  16. Kirill Osenkov says:

    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

  17. Bob says:

    Thanks for your tools. Now the oneNote can get the colorful code now.

    PLEASE clarify the method about how to use it in future.

  18. Yossu says:

    Does this work with OneNote 2003? Bob seems to say it does, but I can't get it to work, mainly because ON doesn't have a Paste Special command. Doing a normal paste makes a real mess of the code, breaking a line at every blank space!

  19. Shiv Kumar says:

    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.

  20. Shiv Kumar says:

    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.

  21. Gunnar says:

    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.

  22. Kirill Osenkov says:

    Jerry Nixon – could you please contact me or leave a way to contact you? We've implemented your suggestion in Roslyn.

  23. YM_Industries says:

    <3 YOU! I really needed this!