Just a quick note, if you install Productivity Power Tools For Visual Studio 2010.
It has a nice feature.. Copy code as html. The feature doesn’t add any new menu option or whatever, simply when you copy the code the usual CTRL+C or Edit -> Copy way in Visual Studio, and paste it in a text-only editor like Notepad, it’ll be treated as text normally, but if you paste it in an HTML capable editor like Microsoft Word, it’ll be paste as HTML.
If you already know what the feature is, and have a problem with Live Writer 2011 or similar version, you can skip to the title that mentions it.
- If you wonder how made this rectangular selection, you can do it by pressing ALT before selection and holding as you move the mouse to continue to select
- If you wonder why, simply to avoid the spaces on the left in the pasted code
If I paste this in notepad, nothing new!
But if I paste in Word 2010 (Outlook is the same)
(it can be better if play with font size and text wrapping options)
Or in Visual Studio HTML Designer
If I paste in source view or any other code-editor view in Visual Studio, it WILL not paste as HTML but as normal text. This is intended, because when you do copy / paste inside Visual Studio, you want it to just work, not have to clean all generated HTML
This is related to the way this feature works. In Windows, you can have multiple formats of copied stuff in clipboard. Text and HTML are two of these formats. So, the feature is simply adding HTML format option to the clipboard, and Visual Studio built-in functionality of course adds the text format already.
Windows Live Writer
Obviously Windows Live Writer is an HTML editor for blog posts, among other features. And I bet it is as obvious that the most common use of this Copy HTML feature is to embed in your blog posts.
Putting code in blog posts this way has its own disadvantages and disadvantages. Those, along with whether you should use this approach or not, are beyond the scope of this post.
If you are interested in the topic though, Scott Hanselman has a great discussion / comparison of so many approaches and the Pros/Cons of each of them:
If you try to paste the code in Windows Live Writer using CTRL+V, here is what you get:
Hmm.. This is not just text (notice font type) and not complete style.
Let’s see the source for that…
This is quite confusing, isn’t it? Clearly it DID realize we have some HTML, but the result has nothing to do with what we we have in Visual Studio at all !!
The Supposed Non Working Fix
If you look at the official announcement of the feature. or StackOverflow question like this (before I reply to it, months after the guy marked the correct solution already), you notice it says you need to paste using CTRL + SHIFT + V, not just CTRL + V. It means "Paste Special".
You go enthusiast to Live Writer to give it a try, you press CTRL + SHIFT + V, ALT + K. But you may encounter the same other problem as me, it doesn’t work, at all, at least in my Windows Live Writer 2011.
Well, after looking for the the "Paste Special" feature in Windows Live Writer, it was very close to me, in the context menu (right click inside text editor)
When clicked, we get the dialog in the official announcement, by default it selects the 2nd option, but we should select the 3rd, "Keep Formatting"
And here we go…
Works as advertised!
Copy HTML Visual Studio Productivity Power Tools Feature Settings
Let’s look at the code we got inside Windows Live Writer (it doesn’t matter which application I guess)…
As you can see, this is really ugly code, so many <span> tags with inline styles, and even <font> tags (thought no-body uses them anyway) and so on.
You can argue this is normal in this way of adding code to blog. You can argue this is why you should ignore this way completely. I’d ask you to have this discussion in the great post Scott HAnselman wrote about this and other approach in this case, but assuming we continue with this one, let’s see what we can and what we cannot improve here…
In Visual Studio, Go To Tools -> Options, from the right side tree, navigate to Productivity Power Tools -> HTML Copy:
The first two options are like header / footer of the code. Those are the opening and closing tags of the generated HTML code. You can change them as you like, for example, for me, I’d add <code> tag around those since I have some extra CSS applied to this tag boxing style ad want my snippets to take it.
The emit spam class will not use CSS styles if you sett to true, instead, will use certain CSS classes. Do not select it unless you know what the CSS classes are and have their styles. Also, if you add those styles to the blog CSS, it won’t show in RSS readers, and if you put in each post, it just feels wrong – again choice is yours after you read Scott’s post.
The emit spam style is what created us the inline CSS. This is the default and unless you care about minimizing the noise you’ll be interested in trying the previous option and disable this one.
You’ll want to enable the two if you are testing to see what inline styles will apply to <span> tags with which CSS classes.
The option to replace line-breaks (new lines) with <BR> is something you normally won’t set to true. You can see the default surrounding tags include <pre>, and <pre> tag in HTML reserves spaces and line breaks, unlike other HTML tags.
If you keep the line breaks and the <pre> tags, the code will be displayed properly in your blog, and when someone tries to copy it to their code editor (Which understands text only, even Visual Studio source/code editor as mentioned above) the line breaks will work correctly, but if you use <BR>, the text editor will not see them (As this is HTML not text) and will render multiple lines in only one, and the poor reader will need to add the line breaks on his own.
The last option is what letter or code is used for space s(Assuming even tabs will convert to spaces).By default it uses the HTML code for spaces . If you are keeping the <pre> tag in your generated HTML, you can replace this with normal real SPACE letter (just replace the value in text box with one press on the space-bar in your keyboard). Since I recommend keeping the <pre> tag anyway, I recommend you use spaces directly too.
I noticed that with different plugins and options to render code in blog with Windows Live Writer, it quite affects the stability of the application. You can see it easily crashing when you move between Edit/Preview/Source views.
Windows Live Writer has a nice recovery feature that usually work (sometimes insists on offering to recover what I recovered already. but that’s fine). However, you should also save yourself a piece of mind and press CTRL + S every now and then and specially before switching views. I press it all the time like crazy every line or less!
BTW, this is how the code looks for me on THIS blog:
Of course you know how to view source in your browser
BTW, this was NOT the blog post I wanted to have done this week. There is another one in the works, about how easy it is to work classes and converting them to different formats like JSON.
p>If you know my public Github URL, you can get the code already, if not, stay tuned till this weekend or so
- - -
P.S. If you liked this post, please help me out by checking the ads on the site and clicking through the one you like.Also, I'm giving away a free newsletter for web developers that you can sign up for from here.