jump to navigation

Copy and Paste Formatting with Visual Studio’s Dark Theme May 17, 2013

Posted by codinglifestyle in CodeProject, Visual Studio, Visual Studio 2012.
Tags: , , , , , ,
trackback

I recently upgraded to VS2012 and, like most of you, was aghast at the default theme. Sure, after installing the updates the blue theme was good. But before updating I tried the dark theme… and I liked it! As our phones and tablets often use dark themes and websites are being remade to look like tablet apps the dark theme had a modern look to it and is easy on the eyes.

Look, it doesn’t matter what I think of the dark theme. I simply want to discuss an undesirable side effect affecting Copy & Paste (don’t forget Cut too). When copying code to an email, Word, or your IM window you realize the dark theme has a dark side:

What we get in the first paste attempt is a WYSIWYG copy of the formatting from Visual Studio. Clearly what most of us want is the second paste attempt. And the formatting issue can get even worse. When pasting to some programs you get white text on a white background. The problem is so obvious it seems the people who made the dark theme don’t actually use it day to day.

I was finding that I needed to: open options, select the blue theme, copy my code to the clipboard, open options again, and reselect the dark theme.

What a tedious workaround! So I went on a quest this morning and am happy to report I have a solution!

  1. Open Tools → Extensions and Updates
  2. Select Online (Visual Studio Gallery) and search for Productivity Power Tools 2012
  3. Download and restart Visual Studio when prompted
  4. Open Tools → Options
  5. Expand Productivity Power Tools and select HTML Copy

  1. Change the BeforeCodeSnippet option to:
    1. <style type=”text/css”>.identifier {color:black !important;}</style><pre style=”{font-family}{font-size}{font-weight}{font-style}”>
  2. Change EmitSpanClass to:
    1. True
  3. Check EmitSpanStyle is:
    1. True

You may want to optionally turn off all other features other than HTML Copy from the “All Extensions” menu.

Let’s take a look at what this feature is doing. When you copy text to the clipboard you can have multiple data formats such as Text, RTF, and HTML. When we’re pasting our code in to Word or an email it will typically use the HTML format (configuration dependent). Here is what we actually see in the clipboard when we do a copy after configuring VS as above.

</pre>
<!--StartFragment-->
<style type="text/css">
 .identifier {
 color: black !important;
 }
</style>
<pre style="font-family: Consolas; font-size: 13;"><span class="keyword" style="color:#569cd6;">var</span>&nbsp;<span class="identifier" style="color:white;">bob</span>&nbsp;<span class="operator" style="color:#b4b4b4;">=</span>&nbsp;<span class="keyword" style="color:#569cd6;">string</span><span class="operator" style="color:#b4b4b4;">.</span><span class="identifier" style="color:white;">Empty</span>;
</pre>
<!--EndFragment-->

Note that we’ve removed the background colour which means all of our identifier text is being set as white on a white background. However the style element is overriding the identifier color and setting it to black. This gives us the desired results:

var bob = string.Empty;

Advertisements

Comments»

1. Nono - July 17, 2013

This is a start. For me, it seems to change only the white color into black. But I use other light colors (like yellow), and these ones are not changed when I paste my code in Word/Outlook, and so this is still unreadable. Any ideas?

codinglifestyle - September 5, 2013

Try this in the BeforeCodeSnippet: .identifier {color:black !important;} .keyword {color:blue !important;} .literal {color: black !important;} .operator {color: blue !important;} .string {color: #A31515 !important;} .number {color: black !important;} .Types {color: #2B91AF !important;}


	
	
Brett - December 5, 2013

These are good additions. In addition, ‘user’ class appears to be associated with class names, so my complete ‘BeforeCodeSnippet’ looks like (note the final ‘pre’ element):

<style type=”text/css”>.user{color:#006600 !important}.identifier {color: black !important;}.keyword {color: blue !important;}.literal {color: black !important;}.operator {color: blue !important;}.string {color: #A31515 !important;}.number {color: black !important;}.Types {color: #2B91AF !important;}</style><pre>

2. huy - September 4, 2013

I use Ditto which is a free clipboard manager (http://ditto-cp.sourceforge.net/). It has the option to paste as plain text (shift-enter).

codinglifestyle - September 5, 2013

Ah, but the point is to keep the formatting. But I also use ditto and didn’t know about that feature so thanks!

3. Chris Bordeman - January 30, 2014

To have it remove styling entirely but keep indention, try:

1) Remove the pre tags entirely,
2) No span, and
3) Let it replace returns with BR tags.

Works great pasting into most places, though in Notepad it keeps the leading spaces.

4. Dome - July 14, 2014

If you want to have an uniform background you can use this instead of writing all the identifiers names :
pre{background:#344042 !important}


	
	
5. John Joseph - January 12, 2015

This doesn’t work well with config file content 😦
Background trick suggested by Dome works but would prefer the just text format.

6. GxR - November 6, 2015

With 2013, all you need is Power Tools extensions. Just installing it fixes the issue.

7. Toobs McGoobs - February 12, 2016

Visual Studio 2015 no longer has issues copying into a light background from the dark theme. If you have Visual Studio 2015 and Productivity Power Tools (and use the dark theme), go to Tools -> Options -> Productivity Power Tools -> Turn Extensions On/Off and turn off the HTML Copy extension.

JF - March 23, 2017

There has to be some other settings then, when copying mine I get the text on black background in an email. I’m using VS 2015

JF - March 23, 2017

Diregard… I’m blind 🙂 I have too many windows open.


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

%d bloggers like this: