Monday, February 12, 2007

Code Snippet plugin for Windows Live Writer

Update (03/18/09): Version 2.0.0 released, please refer to this post for details.
Update (03/16/09): Version 2.0.0 – Preview is now available on CodePlex.
Update (08/01/07): Source code now available on CodePlex.
Update (03/26/07): Version 1.0.2 is now available with
new features.
Update (02/27/07): Version 1.0.1 is now available with
new features.
Update (02/21/07): You can now download the plugin from the Windows Live Gallery

I use Windows Live Writer (WLW) to post to my blog. As of this writing, WLW is in Beta. Nonetheless, the features available are very functional and I have to say that I have nothing but pleasant experiences using the product so far.

One of WLW features of interest to the geek in me is its support for plugins via its SDK. As you may already know, a plugin allows developers to extend an application with additional features.

A good part of my posts contain source code snippets to illustrate and/or compliment the content. Instead of using plain text to represent the code snippets I have been using CSS-based syntax highlighting thanks to the online code formatter written by Jean-Claude Manoli.

When I started using WLW I looked for plugins to see what useful features others have created. The Writer Windows Live Gallery has a growing list of plugins. I had found the Insert Formatted Clipboard, Paste from Visual Studio and Insert Code for Windows Live Writer, all for formatting and/or applying syntax highlighting to sample source code. But while using them I found that there were things I wanted to do that these plugins did not offer. So, I wrote the Code Snippet plugin based on the syntax-highlighting code that Jean-Claude made public.

The following image shows the main Code Snippet window that you can use to interactively review the sample code before inserting into your post.

Code Snippet dialog - Full Mode (click for full image)

Some of the features in the Code Snippet plugin are:

Run Silent - use latest settings to automatically process current clipboard contents for quick pasting without displaying the Code Snippet dialog. Press and hold the Ctrl key while activating the plugin to return to previous mode (Full or Compact).
Rich Text Editor - lets you perform final changes to the source code before pasting it into your blog post. I work with a lot of source-controlled code that I don't want to necessarily touch in that environment prior to posting. So, I wanted to have the ability to increase/decrease indents or make changes to namespaces or class names without pasting to other text editors as an intermediary step.
Expandable/Splitable Code Panes - able to view the code to process or the formatted code using the entire dialog space, in addition to viewing both contents in split mode.
Persistent Options - any changes to the options are automatically stored in an external configuration file and reloaded on next execution.
View HTML - you can view the HTML markup before inserting the code snippet.

Update (02/27/07): New features in version 1.0.1.

Compact Mode - in addition to the Full Mode, you can now also work with a compact version of the dialog that allows you to quickly select the formatting options without a preview. Switching between Full and Compact Modes is quick and painless by pressing the F12 key. The following figure shows the Compact Mode dialog for the plugin.

Code Snippet dialog - Compact Mode

Window Placement Persistence - in addition to automatically storing formatting and other options, now the window location, size, and other characteristics are also remembered.
Copy CSS Style to Clipboard - to make it easier to extract the stylesheet for inclusion in your blog's template, you can now easily copy the contents to the clipboard.

Update (03/26/07): New features in version 1.0.2.

Support for CSS snippets - Added support for syntax highlighting Cascading Style Sheets (CSS) snippets.
Embedded Styles Now Inline - Changed implementation used for embedding styles from using the class attribute to using the style attribute. The former assumed embedding the stylesheet classes as part of the generated HTML for the code snippet. The latter uses inline definitions, which proves to be friendlier to RSS feeds and e-mail delivery where the embedded CSS is not recognized.

Update (03/16/09): New features in version 2.0.0.

Please refer to the CodePlex release page here for all the details.

Download Code Snippet plugin for Windows Live Writer v1.0.2

Download Code Snippet plugin for Windows Live Writer v2.0.0 - Preview

109 comments:

jv said...

Leo - I tried your formatter. It works great in WLW but fails to apply the styles when posted to blogspot. COde shows but no highlighting.

Here is a link to what hapens.
http://tech-comments.blogspot.com/2007/02/test-of-code-snippet-wlwpi_22.html

The styles are there but are not overriding the template. I tried it on a plain vanilla template and same thing.

Leo Vildosola said...

I looked at the post and you seem to have not checked the Embed Style option. Try that first.

Alternative, you can extract the style by doing View Source within the plugin. Copy the contents within the style tags and add it to your template. This way you don't have to worry about the styles in future posts.

jv said...

Leo - I downloaded and installed the latest version. It works extremely well so far. I will continue to use it and post back with any issues.

The convenience features will make it more usable for any new users I am sure.

The "container" works well with the blog templates but only if I remove teh IE6 div issue patches in the style sheet. Not you problem but ne aware that the patches can cause teh container to mis-behave.

I will continue my comments on teh blog here: http://tech-comments.com

The code-comments is a testbed for style changes and other experiments with blogger and isn't published. I just sent you to it so you could look at teh code as posted.

Thanks again for looking at teh HTML, as published, as I should have done before logging an issue.

jv said...

Leo - outer div has issues with IE 6. It doesn't forcce max-height without alos adding:
height: 300px;

Forcing a height seems to fix this bug in IE. IE7 and other browser display correctly.

Would be useful to have more access to outer div settings. Also useful to re-edit entry rather than delete and redo.

Leo Vildosola said...

jv, you can access the styles by copying them from within the plugin. There's a menu option that allows you to copy the entire stylesheet to the clipboard. Once there you can paste it into a new document that you can then save and include in your blog. After that, just clear the Embed Styles option. You can then modify the stylesheet to suit your needs.

I was aware of setting the height to limit the code snippet container. However, this has a negative side effect, which is to make the div height fixed even if you have 1 line of code. I chose not to do that. There's a way to mimic the max-height but this is only for IE. I may end up using that but when I did the tests it did not behave nicely across all browsers I tested (IE6/7, Firefox 1.5/2, Netscape 8.1.2, and Opera 9.1).

I am currently working on something to re-edit the code snippet. However, it is not as easy to do if you are not using a SmartContentSource for the plugin. I have chosen not to use it for other reasons.

I can currently re-read the text. But I need to re-construct the code snippet without the styles applied. This part is not so easy since I have different formatting to deal with. Stay tuned.

Thanks for the feedback. Keep it coming. BTW, I am working on another plugin that will allow you to apply wrappers to selected text. For example, commonly used HTML code like span, div, really anything you like. I may need beta testers. Interested?

Anonymous said...

Fantastic tool. Chanced upon it while evaluating several.

I know for a fact that there are many people who would like support for the boo language. Are you planning to have that at some point? Or at least sharing the source so that we can add it>

Leo Vildosola said...

Thanks. I have not planned on adding any other languages. But I am planning on making the language keys configurable in order to allow the end user to extend and/or create their own. No planned release for this yet however. Working on it as time permits.

I am working on some enhancements to this plugin and on another plugin at the moment that is sharing some of the code I use in this plugin. Because of that I am not currently planning on releasing the code. At least not yet. Once the project is stable I usually do release the code on CodePlex. I have another project there called NHibernateProvider.

If you send me a link to the keywords for this language or some other reference I can definitely try to add the language. It should not take too long depending on the complexity of the language.

I would be happy to make the update available here before it gets published on the Windows Live Gallery.

Dave Haynes said...

I'm also having a problem with your Code Snippet plugin. It's too bad, because it looks like it's exactly what I need. I hope you can help.

When I look at my formatted code in Web Preview mode within WLW, it looks great. When I publish it, it looks absolutely horrible (no styles are applied). I have the Embed Styles selected, but Blogger apparently doesn't like them.

What I've found is that if I apply the style directly to an item, rather than using CSS classes, it works much better, and they come across in feeds that people have subscribed to. Could you change it to apply the styles directly to each element? (That's what I thought Embed Styles did, actually, but I guess not.)

Leo Vildosola said...

You do make a good point. It would be better if the style was embedded inline. I will try to spend some time on it this weekend and see what I can do to satisfy your requirement. Thanks for taking the time to validate what would make it work better.

Leo Vildosola said...

elmogallen, I have implemented the Embed Styles logic as you requested. Now, it will use the style attribute instead of the class attribute when the Embed Styles flag is set. Before I promote it to the Windows Live Gallery I would like to do further testing in a similar environment as yours. Would you be interested in doing some of this testing for me? If so, please e-mail me at lvildosola at htcal dot com.

Anonymous said...

Leo - Thanks so, so much for building this, I have been trying to get a c# code formatter working on my wordpress blog for eons with no success. Now I can add code for c# html, css etc. without having to have support on wordpress itself.

Simply superb.

The Html formatter seems to have trouble multiple with script tags in a html header. It seems to start formatting as javascript after the frist script tag even if there is a /script directly after.

If you can fix this in the next release it would be great.

Thanks again,

Example below:

* had to remove greaterthans on tags with *

*html>
*head>
*meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
*title>Untitled Document*/title>
*script src="yui-utilities.js" type="text/javascript">*/script>
*script src="ext-yui-adapter.js" type="text/javascript">*/script>
*script src="ext-all-debug.js" type="text/javascript">*/script>


*link href="./css/ext-all.css" media="screen" rel="stylesheet" type="text/css">

Leo Vildosola said...

Thanks for the feedback. I had noticed this problem when I added logic to support CSS. I will try to accomodate your request. I'll need to dig back into it.

I am planning to update the plugin to allow editing already formatted code snippets. When I do that release I will try to get this fix in as well.

Anonymous said...

Suggestion, my blog is black background, I actually like the white background that it is put in. My only recommendation is that if the alternation could be reversed, dark to start out with, that would benefit me. Thanks for all your hard work!

Leo Vildosola said...

You can actually do that yourself if you are *not* embedding the styles.

You can get the CSS from the plugin using the Format/Copy Styles to Clipboard option. Save this into a file and after include it in your blog template. Once you do this, don't use the embedding feature so that your posts will use the styles from the file. That way you can customize it as you see fit.

Greg said...

Hello Leo,

this plugin looks really cool.

I was wondering if you know of a way to customize the way an inserted image is formatted in WLW. For example, I use Wordpress and I have CSS classes that I use as shortcuts for how I want images placed in posts.

Thanks for any help you can give me.

Greg

Leo Vildosola said...

I don't know how Wordpress works exactly. But normally you should have the ability to modify the template used for your blog. You can include a reference to your CSS file and then simply edit the image's HTML code. You do this in WLW by switching to the HTML code view (Shift+F11).

I am working on another plugin that allows you to insert Text/HTML snippets. I use it myself to convert the style of text on my posts. It is not in a state that I would publish but it is functional. Keep an eye for it in the near future.

OmegaMan said...

In using IE7 and Firefox 2, when a user copies the code from my blog, and the code has quotes (") or spaces the quotes come out different...when pasted and the user has to manually swap them out.

See my blog http://www.omegacoder.com/?p=14 and copy the code snippet. Paste into notepad, the quotes are not the standard " but the different ones and come out different...Please advise, is it something I am doing or possibly Wordpress altering the quotes? Thanks.

Leo Vildosola said...

I just tried it and it appears that the quotes are coming like that from your post. If you look closer they are right there in the post itself. In fact, I checked other posts in your blog and they all seem to use the same quotes.

Further, I tested the plugin to see if they make any changes to the quotes and it does not. It uses whatever characters you past into it.

I also verified with some of the posts I made in my own blog to see if the quotes are changed, but they are not. The quotes in my posts seem to be fine.

May I suggest you take a look at your editor? It looks like either the editor is using such quotes or your blog engine is converting them for some reason.

OmegaMan said...

Thanks Leo! That helps me identify that it is on my end, most likely WordPress / theme and not within what is being published.

Anonymous said...

Hi Leo!

I'm unable to open the Windows Live Gallery page where is hosted your plugin. Could you help me? Can I download it from a different location?

Thanks in advance,
Marco Minerva, marco.minerva@gmail.com

Leo Vildosola said...

I just tried it again and the link from the post seems to work fine and takes you to the respective page in the gallery.

However, if you still have problems getting the file please e-mail me at "lvildosola at htcal dot com" and I will be happy to send you the MSI.

OmegaMan said...

On other item. In looking at the output, the inline styles have consolos which causes an inaccurate representation of the Courier font for some bizarre reason, at least on my English based browser session...could you change your plugin to output console instead? Thanks as always...

Leo Vildosola said...

I'm sorry but I don't understand what you mean. Is it that the word "consolos" is used and it should instead be "console"? If so, I did a search in the project and I don't find the word "consolos" anywhere. Can you elaborate?

OmegaMan said...

I have blogged about it here with an example

http://www.omegacoder.com/?p=44

When I look at the output html (in WLW) after using the plugin, that is the html I see and which gets published to the blog. Thanks.

Leo Vildosola said...

Ahh! I see what you mean. However, 'Console' from what I see is not a valid font family. 'Consolas' on the other hand is. This is the script from the original author. I will remove 'Consolas' altogether from the code for the next release.

Note that if 'Consolas' does not exist it will use 'Courier New' automatically.

Can you tell me what problem is causing? Is it the one dealing with the quotes?

OmegaMan said...

No if you look at other articles in my blog, sometimes the code snippet text looks fuzzy. When I changed it to console the text became crisp.

As to the smart quotes, it turned out to be a WordPress issue, to which my blog is based on that. They have filtering functions to weed out bizarre characters that the user might input depending on the character set being used. What they created was a feature, which is nice for joe blogger, but not joe programmer blogger, which would change the basic qoute to angled smart quotes. I currently have the work around on that. Thanks Leo!

Anonymous said...

Wow. Love the plugin.

Leo Vildosola said...

I think the reason why 'console' gives that result is because 'Courier New' is selected since 'console' is not found. In any case, I am removing 'consolas' and we should not have this issue in future releases. Thanks for the feedback!

Anonymous said...

I am finding that my blog is stripping out the escapes such as in my code if I have a (\n \d etc). I am having to manually escape them such as \\. A suggestion for the plugin, option to escape the escapes before writing to WLW or to have the slash as the html coded character \.

Also if you ever want to publish on codeplex making this an open source module, let me know, I would be willing to devote time to it. Thanks again Leo!

Leo Vildosola said...

Great comment. I never thought of that. I will see when I have a chance to add it. Pretty busy lately.

I am definitely planning on releasing it in CodePlex. I just need to fix a few things before doing so. Not in this particular plugin but in the shared code in general. I have 3 plugins that share the same code base. Keep an eye for it though. As soon as I have a chance I will definitely do it.

Anonymous said...

Leo,
Great plugin! I am loving WLW and great plugins like yours make it even better. I am a ColdFusion programmer and was wondering if there is an way I could contribute ColdFusion source code coloring to your project. I think it would be a really great addition. Thanks again for your hard work!

Leo Vildosola said...

Absolutely! I am in the process of packaging the code to make it available in CodePlex. The project has already been created I just need to get moving to add the source code to Source Control. It should be there soon.

Anonymous said...

Hello! there's an alternative donwload link? the link on gallery.live.com raise an error!!

Leo Vildosola said...

I just tried the link and it all seems to be working properly. Can you try it again and let us know if you still have issues downloading the MSI?

Anonymous said...

Hello Leo,
I have try to download the msi from your link an other time, but gallery.live.com raise the same error!

Leo Vildosola said...

E-mail me at "lvildosola at htcal dot com" and I will send you the MSI directly.

Anonymous said...

Nice. Thanks for the great tool.

Anonymous said...

fails to properly format this :

the '\\' is the culprit


SetSetting(ApplicationName,
SectionPath.Split(new char[]{'\\'},StringSplitOptions.RemoveEmptyEntries),
SettingName,
SettingValue,
ExpiresOnUTC);

Leo Vildosola said...

Can you tell me how it fails to format? I just tried it with my current code base and it seems to parese correctly. Also, can you tell me which language you were using?

Anonymous said...

Hi Leo,

Are you going to open up CodePlex to all for collaboration with other developers? (I posted the same question on the forum in codeplex). I am working on two features to add at this time.

Leo Vildosola said...

Sure, I will add you to the user list.

Trevor Westerdahl said...

Any chance you can help me figure out why my code looses the tabs (spacing) and every line stats fully left?

I tried schaging the setting in VS2005 to use spaces instead of tabs and no difference.

Here is a link to my blog where I tries to use the plugin:

http://trevorunlocked.blogspot.com/2007/10/replicating-look-feel-of-devexpress.html

Leo Vildosola said...

There's an option in the plugin that is set by default. Just clear it and try it again. The option can be accessed in the top level menu:

Edit | Line Indent | Trim on Paste

Anonymous said...

Fantastic plug-in - thanks Leo!

I do have an issue though: If you could take a brief look at http://www.24100.net you'll find a test post with some code. Everything looks fine, however, the indentation seems to get lost. Every single line starts at the very left.

I have tried clearing and setting Edit > Line Indent > Trim on Paste but none resolves the issue.

Your feedback is very welcomed!

-Ralf

Leo Vildosola said...

This is a known bug with WLW Beta 3's XHTML markup generator. To get around this you will have to change your Weblog's Settings Markup Type from XHTML to HTML. To change the Markup Type:

1. Select Weblog from the top level menu or toolbar.
2. Select Edit Weblog Settings..., the Weblog Settings dialog appears.
3. Select Advanced from the options list.
4. Change the Markup Type from the drop down list.
5. Select OK to accept your changes.

Anonymous said...

I have a problem with your plugin. When i paste javascript code,windows live shows an error. It says that "Windows Live Writer has encountered a problem: Requested Clipboard operation did not succeed.." and after that when i use it again it is not showing any container for the code. I am using windows sp2. Please check this out.

Leo Vildosola said...

Can you please tell me which version of WLW you are using? Latest version is 2008.

Also, can you take a look at the Event Log? It will contain more descriptive information about the error. If you can e-mail me that I would appreciate it. You can send the information to lvildosola at htcal dot com.

Anonymous said...

Hey Leo, just thought you'd like to know that I've created an extension for BlogEngine.net that adds a "copy to clipboard" link to code generated using your plugin. Check it out:

http://www.squaredroot.com/post/2008/01/Copy-Code-to-Clipboard-Extension-for-BlogEngine.aspx

Leo Vildosola said...

Very cool. Just want I was looking for myself. Thanks!

Anonymous said...

Leo pls, add ActionScript 2.0,ActionScript 3.0 code

Corey Thomas said...

Hey Leo,

Thanks for making the plug-in. Problem: The formatting is off after inserting the code to my blog. It starts double spacing everything.

See: http://vbscripter.blogspot.com

Thanks,
-Corey

Leo Vildosola said...

This is a Blogger problem. Go to your blog Settings in Blogger. Go to the Formatting section. Set the option Convert line breaks to No.

hongjun said...

Hi,

I tried your plugin and it works great except 1. If I set line number to show, then visitors to my blog will have problem selecting my codes since line numbers will also be selected. It is possible if we can have the line number column separated in a different cell so code selection will not select line number as well?

Thanks a lot.

Leo Vildosola said...

Hmmm. That one will be a bit tough since I would have to change the way in which the generation of the HTML happens. I will check it out but I can't promise anything.

As an alternative, if your readers are using Visual Studio they can easily get rid of these extract characters by hilighting the text while holding down the Alt key. That will allow them to perform the selection vertically.

hongjun said...

I understand the "pain" in changing how things are to be written out in HTML. I thought it will benefit to all since the plugin supports languages not only to Visual Studio e.g. TSQL, etc.

A good example is here
http://expertria.com/index.php/archives/105

Cheers
hongjun

Leo Vildosola said...

You definitely bring a good point. I just have to think about how to do it in such a way so as not to disturb too much of the code that is already working.

Daniel said...

Hi Leo,

Thanks for a great tool. I've found that when I'm posting to my Blogger account, after the first code snippet, WLW starts using div tags instead of p tags, and the result is that there are these weird gaps between paragraphs:

http://incrediblejourneysintotheknown.blogspot.com/2008/04/coroutines-with-ienumerable-and-yield.html

Is there a setting somewhere I can change to fix this?

Also when I had the alternating gray/white lines switched on, the gray lines would be huge whereas the white lines would be small.

--Daniel

Leo Vildosola said...

Take a look at my comment of March 19, 2008 9:06 PM. It may be the solution to your problem.

Anonymous said...

Nice, I recently discovered wlw, I love it and this plugin is a real time saver, would be nice to implement shortcuts to speed up even more the insertion of code snippets.
Keep up the good work :-)

Todd Beaulieu said...

Hello,

I'm wicked new to blogging. When trying to post code snippets with your tool (and all the others I've tried) long lines of code run off the right side of the page and there's no way to see them or copy them.

Do you know of a trick to prevent this? I'd like to "wrap" them.

Thank you.

Leo Vildosola said...

I just tried it and the resulting code snippet in IE7 automatically wraps. I wonder if you may be using a different browser to view the resulting post.

Todd Beaulieu said...

I actually am using IE 7. The only way I've found to cause wrapping is surround it with the container.

I'm quite html-stupid, so I assume my expectations aren't reasonable.

Leo Vildosola said...

Not unreasonable at all. The problem is that in order to ensure wrapping a div must be used. So the container works because it is a div that has CSS styles to force the wrapping. Otherwise, the code is just placed in the HTML page.

Michael McNamara said...

Hi Leo,

Thanks for your plug-in. I works very nicely. I had one thought though, instead of turning off "Covert line breaks" within Blogger couldn't you just alter your code to NOT insert all those CR/LFs between the PRE tags?

Turning off "Convert line breaks" is going to ruin the formating on a lot of the content people might have already created.

Thanks for your efforts!

Cheers!

Thanks,

Leo Vildosola said...

Good point. I did think about it. However, to do so it means that I have to add logic specific to Blogger, where all other engines behave correctly. Do you see the dilemma?

hongjun said...

Hi,

Since the other blogger engine is more different, I would suggest default the feature "Convert line breaks" to "On".

I would say your code snippet plugin is perfect except the below 2.

1) Have the line number column separated in a different cell so code selection will not select line number as well. I thought this is a must have so visitors can do copy-paste easily. Without that, it is rather useless to have line numbers on.

2) Option to on/off "Convert line breaks". It will not be a problem if users do not change options at blogger settings side every now and then. So, I feel this is not so urgent or essential but good to have. Or


Cheers
hongjun

Leo Vildosola said...

Hmmm. Looks interesting. Let me look into it. Thanks for the feedback.

Balaji Dutt said...

Hi Leo,

Many thanks for taking over this plugin!

A couple of things I could use your help on:

1. I find that whenever I paste in an extremely long line of text, which has no breaks, the preview window gets a little funky. See this screenshot

2. You've mentioned in your comments that the plugin CSS should not put the Consolas font, but as of the latest version available in the Live Gallery, copying CSS to clipboard still results in consolas turning up.

3. I've done the following:

- Included the plugin styles into my Blog theme's CSS

- Made a draft post with some HTML code in it, taking care to uncheck the Embed Styles option. See the HTML of the post from Line 121 onwards.

- Despite the above, the post when viewed normally seems to be picking up only the default code/pre formatting - screenshot

Any suggestions/ideas on what I can do?

Balaji Dutt said...

Whoops!

Forgot to mention version info:

- WLW Version: Version 2008 (Build 12.0.1370.325)
- OS Version: Win XP SP2 (Running with Admin rights)
- Plugin Version: 1.0.2.0
- Blog Software: WordPress 2.5.1 (Own install)

Leo Vildosola said...

If you get the latest version source code from CodePlex you will have all these issues resolved. However, if you don't have the ability to compile the code let me know.

Balaji Dutt said...

Hi Leo,

I looked at the Codeplex page but I don't think I am able to compile the code :-(

Could you help me out with that? Please do let me know how I should upgrade my existing install of the plugin.

Anonymous said...

I liked your pluging and I did have it working at one point in time, but with a system rebuild the latest (as per the CodePlex setups) has issues. I understand these are fixed in the latest source, but there's a number of references that are not included as part of the download so I'm not able to build it. It would be extremely helpful for myself and I'm sure the rest of the community who'd like to use your plugin if you did a new setup release on CodePlex with the latest code.

Anonymous said...

Is there a way to disable having the vertical scroll bar? I want all the code visisble and do not want people to have to scroll to see the code.

Thank you.
-Mike

coffeejolts said...

How about adding Java code formatting? Seems odd that you leave out one of the most popular languages.

Leo Vildosola said...

Mike snow, the only way to force the scrollbars off is if you change the CSS. If you are embedding the styles then there's no easy way to accomplish that. If you are simply references the styles and you have a central CSS for the code snippets then it is just a matter of changing the style to remove the height for the container.

coffeejolts, you have a good point. However, since the plugin is based on the syntax highlighting logic done by someone else, Java was not originally supported. I never added it since I have not done Java in years and honestly it just escaped me. But it would be a good addition.

Leo Vildosola said...

Garry, I may have a little time this week and I will re-visit the project and see if I can compile a new version to be accessible via CodePlex.

Anonymous said...

I figured out how to get rid of the vertical scroll bar so that the whole code snippet is shown:

1. Switch to source view in Live Writer.
2. Search for the text max-height:200px;
3. Delete this text.

Leo Vildosola said...

So simple, yet so clever. I was thinking of it more from a tool perspective. Although you will have to do this for every code snippet, you are absolutely correct in your solution. Thanks for sharing.

Leo Vildosola said...

coffeejolts, I was looking at the code (been a while) and I noticed that I already had added support for Java. If you get the latest code from CodePlex you will have it.

Anonymous said...

Here is my blog btw that shows the code snippet without the verical scroll bar:
http://silverlight.net/blogs/msnow/default.aspx

I think it looks much better this way.

Is there a way to modify your tool to do this?

Leo Vildosola said...

It does look pretty good! I am thinking about exposing the styles in some way in order to allow this level of flexibility. I'll see when I have some time to get back into it.

Mike Smith said...

Leo,

Love the tool you created. While I know that Blogger is the problem, turning "Covert line breaks" off breaks most of the pages I have created over the last year. So if you get a chance, consider adding this as a new feature.

Thanks
Mike

Leo Vildosola said...

Mike, I am currently doing some changes to the code so I will see what I can do about this. I have to refresh my memory on what the exact problem is. I believe that Blogger adds extra < BR / > to the end of each line. Anyway, I'll look at it.

Leo Vildosola said...

Mike, I just did a test in a sandbox environment I have with Blogger. I turned on Convert line breaks and did a post using all different permutations of code snippets. I thought I had taken care of this before and it turns out that I did! Unfortunately, the code is not published to the Gallery and therefore you cannot get the latest release in executable form. I am preparing to do a new release that contains a bunch of enhancements. I don't know the timeframe. But if you want the latest you can get it from CodePlex. Otherwise, I will try to do a build an make it available through CodePlex before it hits the Gallery.

hongjun said...

Google code provide good if not better alternatives.

SyntaxHighlighter
http://code.google.com/p/syntaxhighlighter/

Code Prettify
http://code.google.com/p/google-code-prettify/

Unknown said...

does anyone know how i can unsubscribe from this thread? every time i try to, it says i'm already unsubscribed, yet i continue to get emails almost daily.

hongjun said...

To unsubscribe,

1. Click on "Post Comment" link.
2. Click on "Unsubscribe" link. It is somewhere at the right near "Choose an identity".

hongjun
http://hongjun.blogspot.com

Ananta Acharya said...

i tried this,
very excellent plug in
but the problem with me is i get an extra line when i publish it, but does not show in the wlw window.
you can look at

http://learning-r.blogspot.com/2008/07/data-steps-reading-from-file.html

thanks

Leo Vildosola said...

Are you using the version available at the Gallery? If so, that version does not account for such issues, mostly with Blogger. If you can manage to compile the code from CodePlex you can get rid of this just by upgrading. I am working on making a new version available, if you prefer to wait. Read through the comments for a workaround, if you are using Blogger.

Anonymous said...

Hi Leo
First off. After searching the web for an plugin that actually worked for hours, i found your plugin.
My problem was, that a lot of the other plugins didn't work to well with blogspot. However, as you also use blogspot, i thought that it HAD to work.
So, after looking at all the coments on your blog, regarding the plugin, i found out how to solve the problem.

Well - I'm writing because I have an suggestion for enhancing the plugin.
It's rather simple. 2 fields.
1. Setting the width of the wrapper
2. Setting the max height of the wrapper.

Anyways, thank you very much for a great plugin.

Leo Vildosola said...

Sorry for the delay responding. Your suggestions make a lot of sense. What I was working on is to make other parts also available. Essentially, all parts from the CSS so that the user can configure it without having to change the style sheets themselves. Unfortunately, I don't have a lot of time to spend on these and when the updates will make it is not known to me. However, the source code is available in CodePlex. Feel free to add things and just let me know what those are for inclusion. Thanks!

Anonymous said...

Would it be possible to format the HTML in such a way that when you copy and paste the code from a blog it doesn't include the line numbers?

Todd Smith said...

Would it be possible to format the HTML in such a way that when you copy and paste the code from a blog it doesn't include the line numbers?

hongjun said...

I have commented on the line number problem earlier on March 30, 2008. I raised this issue and commented it is more than essential to have it not to copy line number when we copy codes. I said many will be deterred into using this plugin should this request is not paid attention.

Nevertheless, I blogged in my blog on how to insert code snippet on blogger separately here.

How to Insert Code Snippet on Blogger [via]

Cheers
hongjun

Thuc Si Mau Ho said...

Chris Chou posted a useful tip on how to avoid the line break issue. You just need to set the Markup Types to HTML instead of XHTML as default in WLW. I tried it on my blog post and it works just fine.

Leo Vildosola said...

Todd, just saw your comment. I am adding your request to the feature list on the CodePlex home for the plugin. Thanks.

dwhite said...

Leo -
Thanks so much for releasing this wonderful add-in.

Today I ran across an issue with the HTML formatter...
The script bug that @Matt reported back in 2007 still exists today. From his original comment:
"The Html formatter seems to have trouble multiple with script tags in a html header. It seems to start formatting as javascript after the frist script tag even if there is a /script directly after."

Is there a work-around for this?

-Damien

Leo Vildosola said...

dwhite, thanks for the feedback. I am just wondering if you are using the latest v2.0 release. Can you please confirm before I re-check it? You can refer to the following post for details: Code Snippet plugin for Windows Live Writer v2.0.0.

Unknown said...

Worked perfectly. Thank you!

Unknown said...

"worked perfectly"???

what the heck kind of blog is this? Twilight Zone?

THis is what I posted:

Any idea why I can't use this plug-in any more? I've uninstalled and reinstalled it several times and it refuses to show in the plug-ins list.

I know, because I copied it to the clipboard in case of problems. SO, how did that get translated to "worked perfectly"?????

Leo Vildosola said...

TBeaulieu, I do not know why the blog would post something you did not write.

If you are having trouble with the plugin I would be happy to assist you.

First thing would be to ensure that you have the latest of both WLW and the plugin. If not, I would suggest you start there.

FYI, this post is for the original plugin, which may not work correctly with the latest WLW release.

I recommend you download and install the latest of both WLW and the plugin.

Here are the links to the latest versions:

Windows Live Writer 2009 DownloadCode Snippet plugin for Windows Live Writer v2.0.0 DownloadFeel free to provide your feedback related to the v2.0.0 of the plugin in the post dedicated to it. Here's the link:

Code Snippet plugin for Windows Live Writer v2.0.0 Post

Web Design Quote said...

Hello ...the tool was Fantastic. It would be better if the style was embedded inline. I'll try this and let you inform you either its working or not. Keep sharing the more information.

Oliver Wirkus said...

The current version works fine with Live Writer, but I looks like this plugin limits the numbers of code lines to 12. I was not able to increase the number of displayed codelines.
When using code snipptes with more than 12 lines, a slider is displayed.
How can I get rid of this slider? How can I display more than 12 lines of code?

Leo Vildosola said...

You can accomplish this by clearing the option to use a container before you insert the code snippet. If you remove the container you will not get any scrollable area and you should accomplish what you want.

Johannes Rössel said...

Just a thought (can't register on CodePlex right now to leave a comment there):

Have you thought about using the Colorer library (http://colorer.sourceforge.net/) for syntax highlighting? It already has a mature and flexible system of defining new languages and a large collection of language definitions.

Paul Grimley said...

Hi, for some reason your code snippet plugin was blocking me from opening up blog entries from my Windows Live Space only if the code snippet was used in the latest entry! I'm also experiencing RSS feed issues and wondering whether this is affecting this...

Anonymous said...

I Wnt to download code snippet plug in for windowslive writer code .
Would u plz tell me the link i thik you are sending people from one page to another page and finally people finding only exe not a development code..
So plz give here exactlink to download code

Mark said...

Leo - THANK YOU! This is exactly the plugin I have been looking for.

It also answers another question I've had, which is how to develop WLW plugins.

Thanks again.

Jeff said...

Thank you! With your start, I was able to easily add a class for ABAP formatting. :)