WLW Code Plugin
The Live Writer Source Code Plug-in For WordPress.com Blogs
The following software is free to download and use, subject to the Creative Commons License.
This is a Windows Live Writer Plug-In for ‘Syntax Highlighting in WordPress.com blogs’. It uses the Syntax Highlighting feature of WordPress.com to format your source code into the correct syntax for the type of source code snippet (e.g: C#, XML, Java etc). The result is a clear formatted code snippet in your blog like this:
string outputMessage;
bool ok = RunProcess(exePath, arguments, out outputMessage);
if (checkOutput == true)
{
if (outputMessage.Contains(success))
{
return true;
}
}
Whilst there are numerous plug-ins for self-hosted WordPress blogs and for other blog engines this one fills the specific requirements needed for a plug-in that targets WordPress.com hosted blogs. It inserts the correct ‘Wordpress shortcode’ entry around your code snippet to ensure it is displayed correctly in your WordPress.com blog. For details of Syntax Highlighting in WordPress.com, and the supported languages, check out: http://support.wordpress.com/code.
For more details on this plug-in and how it was created then checkout my related blog posts:
1) Syntax highlighting in WordPress.com hosted blogs and how to create a windows live writer plug-in
2) New version of source code syntax highlighting live writer plugin for wordpress.com blogs/
3) Live Writer Syntax Highlighting Plug-in v1.2.0 Released
4) Live Writer Syntax Highlighting Plug-in v1.3.0 Released
5) New WordPress.com Source Code Live Writer Plugin Version (v1.4) Released
6) Minor Update (v1.4.1) Released
Using the Plug-In:
Create your blog post in Windows Live Writer as normal but when you want to key some Source Code choose Insert > Source Code Highlighter from the right hand Menu, then key or paste your source code into the pop up form. Select the type of source code it is (e.g.CSharp etc) and click insert. Once inserted you can use the properties menu bar to customise the way source code is displayed. The plug-in will also display a preview in the editor of what the source code will look like once posted on your blog.
Screenshots:
Inserting a code snippet & setting options:
Preview your code in the code editor:
For Versions of Live Writer pre 2011 preview your code in the editor:
For Live Writer 2011 you can preview your changes within your blog template externally to Live Writer:
Features:
-
Easy to insert code and manage it within the editor. Not only does it make your source code stand out on your blog but this plug-in also enables you to manage the code snippet easily without messing about with formatting or spell checking.
-
Choose from the large number of languages supported by WordPress.com. Plus this list can be modified on your machine to just see a smaller list. By modifying the text file included in the download zip file, and locating it in the same folder as the plug-in, it is possible to customise the list of languages in the plug-in. If you only post code snippets in a few formats (e.g: C# and XML) then you can remove the others from the text file thus removing them from the plug-in list for improved usability. Also if WordPress add more languages to the list of supported syntaxes then it’s possible to add the new language to the text file which will allow you to use the new language syntax without downloading a new version.
-
Supports all the features of the WordPress.com code highlighting functionality, such as ‘no toolbar’, ‘line highlighting’ etc. For the full list check out http://support.wordpress.com/code.
- Easy Installation. Just copy the files to the Windows Live Writer plugins folder (see below).
- Preview functionality shows how your code snippet will look once its posted making it easy to visualise how your post will look.For Pre 2011 Versions of Live Writer you can view a preview of your code snippet within the Edit and Preview views in Live Writer itself. (NB: This is implemented by adding hidden JavaScript to your post whilst it’s in Live Writer but then substitutes this with the correct WordPress tags when you publish. This feature can be turned on/off for each code snippet).
- For Live Writer 2011 it is not possible to view the code snippet preview on the Edit and Preview views but instead you can choose to display the code snippet externally in your browser at the click of a button. This external preview will show the code inside your cached blog theme template.
- For all versions you can now preview your changes within the Code Editor window for fast review of your code changes.
-
You can trim the whitespace from the code snippet after pasting it in.
-
You can easily see the line and column number for each position in the code snippet to ensure that you are highlighting the right lines or that you don’t exceed your chosen snippet width.
- The Code Entry Window now enables scrolling so that you can easily mange your code snippet.
- As of V1.4.1 you can now control whether the plugin performs HTML encoding when publishing the post, useful for non-Wordpress.com hosted blogs. Configured via the Plugin Options in Live Writer. For more information see here.
Installation:
To install the plug-in download it from the link below, unzip it and then copy the files to the Plugins folder under the Windows Live Writer program files folder, for example C:\Program Files\Windows Live\Writer\Plugins. Optionally you can make use of the customisable language list by updating the text file, or delete it as the plug-in will work without it .
| Version 1.4.1 (Recommended) | More Details | Download Now |
| Version 1.4.0 | More Details | Download Now |
| Version 1.3.0 | More Details | Download Now |
| Version 1.2.0 | More Details | Download Now |
| Version 1.1.0 | More Details | Download Now |
| Version 1.0.0 | More Details | No longer available |
Note: This plug-in requires the Microsoft.Net Framework V2.0 or above (installed with Live Writer), available here.
ALL SOFTWARE IS PROVIDED AS-IS. THERE IS ARE NO WARRANTIES WITH RESPECT TO SOFTWARE AND I HEREBY DISCLAIM ALL WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY. NO WARRANTY IS MADE THAT THE SOFTWARE WILL OPERATE ERROR-FREE OR REGARDING THE RESULTS TO BE ACHIEVED.
-
Rich Hewlett
UK based Developer, Architect & Geek -
Content Licence
Subscribe via RSS
Hi Rich,
thanks for writing this plugin. It makes -handling with live writer so easy.The only thing i miss is the type=plain for code samples (or better, configuration file samples) where syntax highlighting is not desired.
Greetings from Munich,
Gerhard
Gerhard, there is a source code language type of ‘text’ which should be ideal for situations where you want plain formatting. Try out the new version and see what you think.
This is a great plug-in, I was using another one, but this one now looks more refined.
Great job by the way.
I appreciate it…
Until next time,
LEHenryJr
Hi, Thanks for the useful plugin. I was very happy with 1.1.0. I am having plenty of problems with 1.2. I am using LiveWriter 14.0.8117.416 in Windows 7 64 bit.
1. XML tags in my code snippet are being capitalized.
2. This new version adds a lot of JavaScript code, which is not what I like.
3. Preview is not working very well. Sometimes, it shows the JavaScript added by the plugin.
Hi, Viv.
Thanks for the feedback., my responses are below:
1. The XML tags are capitalised by the WordPress.com syntax highlighter as part of the formatting and so will be shown in capitals on your blog once it’s posted regardless of using the plug-in or not.
2. The plug-in does add JavaScript but this is purely for the preview functionality to work within Live Writer and the script will not be posted with the blog post when you submit it.
3. Sorry to hear that preview is not working well for you, but it sounds as though the problem could be just the way Live Writer works. If you change any of the snippet’s properties in the editor then the preview will temporarily be disabled and the raw snippet code will be displayed until the view is refreshed by switching to Source or Preview views. Unfortunately Live Writer doesn’t refresh the editor view unless you switch to another view and back again. Perhaps this is the problem you’re experiencing?
Really nice plugin, thanks for making it !
There’s only one thing I’d like to change: would it be possible to use the WordPress.com
tags instead of HTML + CSS + JS ? I often use the code view, so I’d prefer not to have the markup cluttered with unreadable areas like that…I’m glad you like it Thomas.
The HTML + CSS + JS is purely to implement the Preview functionality within Live Writer and it doesn’t get included with your blog post. When you publish your post the code snippet is enclosed in the appropriate ‘sourcecode’ tags supported by WordPress. If you don’t want to see any of this markup within LiveWriter then you can disable preview for the code snippet via the right hand properties tab.
Hi Rich. I like your plugin. One thing I noticed off the bat was an issue with the Wrap Lines. It appears that the code sent to WordPress looks like this
. When it renders in my browser IE, Firefox, Chrome. The lines do not wrap then just extend out. If I remove the
I figured it out. Please delete my previous comments above. I put it all in here.
Basically your plugin is outputting a “pre” tag wrapper around the “sourcecode” block. I figured out you need this because wordpress will collapse the code that is returned by the GeneratePublishHtml function if the code isn’t contained within a “pre” wrapper. Unfortunately this pre wrapper is telling browsers to not wrap the lines. Therefore a CSS style=”white-space: normal” is need on the “pre” wrapper element. When this style is used the browsers will now render the code correctly without the line breaks.
Hope this helps. Do you think it would be possible to add this style attribute into a new version of your plugin?
Thanks
Thanks for your comment and for spotting this issue. I hope to address it in the next version.
Hi there–
Thank you for the plugin. It posts well to my wordpress.com account.
The preview doesn’t seem to be working at all for me, however. I wonder if this is because I am using Live Writer 2011 which is the version that is available from Microsoft’s site. From the screenshots on this page it appears that you are or were using an earlier version.
Would you expect the preview functionality to work with LV 2011? If no, could you let me know what version you use, and if you have a link to download it that would be very helpful.
Thanks again in any case.
-nate
Hi Nate. After some investigation it appears that the latest version of Live Writer (included in Live Essentials 2011) does not support running JavaScript in the preview or edit modes. This is required for my plugin to generate the preview. I am looking at ways to get around this as I want to support the latest version of Live Writer. In the meantime you may be able to download the original Live Essentials. Try this link http://g.live.com/1rewlive3/en/wlsetup-web.exe.
Many thanks for this plug-in. It seems to do exactly what I want.
Richard,
Thanks for writing this plugin.
I’m encountering a problem where I end up with a thick grey border around my code snippet, you can see a example of this here:
http://blog.zygonia.net/2011/05/11/test-post/
I’ve tried two different themes and the border is always there. If I edit the post in WordPress after posting and remove the
then the grey border goes away. Obviously this isn't an ideal solution especially where a post could have several code snippets.Any ideas how to solve this?
I'm running WordPress 3.1.2 and posting using WLW 2011 (Build 15.4.3508.1109).
Cheers
Kev
Hi Kev.
I’m not able to see your test post, but the issue you describe is caused by the CSS properties on your WordPress template. It’s usually due to the CSS properties on your PRE or CODE elements specifying a border or backcolor. The site is therefore rendering correctly but not as you’d wish. I would recommend changing the CSS file to remove the border or backcolor for these HTML elements. There is not a way of automatically removing these during posting from Live Writer in this version of the plugin I’m afraid. Perhaps I can look at making the HTML output more customisable in future versions but LiveWriter is very particular on the HTML from plugins and so I’m not sure how customisable it could be.
Rich
Nice work, It would be good if you could set a default though
Glad you like it.
Do you mean a default language in code entry form? That’s a good idea. It could default to the last one you used. I’ll add it to my improvements list.
Yeah that’s right, I find i’ll most likely use csharp so it would be good it it defaulted to that. last used would be fine.
As of the new V1.4 version the language drop down will default to the last used by the user.
Very nice. I thought I was going to have to write posts with Live Writer and then add the code snips via the WP web editor. This makes it much easier. I agree with the previous comment. Remembering the last used language would be a great improvement.
As of the new V1.4 version of the plugin the language drop down will default to the last used by the user.
I’ve found an issue that seems to be caused by the Div tags created by this plugin.
1. Post a page with some source code (i’m using csharp) using this addin
2. In Windows Live Writer Open the page you posted in the previous step
The title and categoises of the post are not retrieved. After some testing if i remove this div tag from around the tags in wordpress then the post loads the title and category but the plugin no longer functions, however the source code still functions correctly in my post
This defect has been fixed in the new version (v1.4) available for download now.
Rich
Excellent plugin! Thanks. The only issue I have is that when you download a post that has code previously inserted by using the plugin from the server I can’t edit its properties anymore. The plugin removes the id that allows it to recognize the previously entered snippet.
check ths windows live writer XsltPlugin here http://bit.ly/wQpeiF
Hi, I’d like to report a bug. When I enter this into your plugin:
<?php …some PHP code here…
it will not convert it to a proper HTML entity, e.g. "<?php" etc. This will cause all sorts of issues, from WLW WYSIWYG mode not displaying it properly to saving it incorrectly into WordPress database and even possible data loss when this post is loaded into WordPress's own WYSIWYG editor where it will simply strip this piece of content.
I suspect the "<" character will cause trouble in other languages too because it doesn't seem to be handled correctly.
I have the same problem with csharp code such as List. The angle brackets are not being html encoded in the final output and thus my code just shows List. The gets interpreted as an html tag. Please update with a fix. Thanks.
funny, the comment I just posted also doesn’t html encode the angle brackets. It should have shown up as List<T%gt;
Let’s try that one last time List<T>
Thanks for the comment. This issue is fixed in the new version of the plugin (v1.4) available for download now.
Thanks for reporting this issue. I’m glad to report that it is fixed in the new version of the plugin (v1.4) available for download now.
Hey Rich, great plugin thanks for making it. I\’m experiencing the dark border issue as well but I can mess with my CSS. My biggest problem is that when I post HTML or XML code snippets it turns all of the \’less than\’ and \’greater than\’ symbols into in the post. During preview or local preview it looks fine. It\’s only messed up after post. Please see http://bit.ly/QvZqIf for an example. Any ideas?
Hi, sorry for the delay in replying, I’ve been on holiday and therefore offline for a few weeks. A similar issue to this was fixed in version 1.4 of the plugin, can you confirm what version on the plugin you are using?
Hey Rich, Thanks for your work. I am trying to use the plugin with WLW 2012 and Syntax Highlighter 3.1.3. The XML formatting is showing up as <xsl:template name="ShowPresence"> rather than XML tags. Any Ideas? Matthew
Hi, thanks for your comment. The plugin only works for WordPress.com hosted blogs as it relies on the shortcode functionality built into the WP.com framework. Are you self hosting a WordPress blog? If not can you confirm the version of the plugin you are using.
Thanks,
Rich.
Thanks! (Obviously the XML above looks fine, it shouldn’t mine is all escape characters. I am self hosting and trying 1.4, I have been using 1.3 for a while. I’ll switch back and try that one again.
Rich, I rolled back to 1.3 and it’s working again. http://www.ableblue.com/blog/archive/2012/09/11/show-presence-in-sharepoint-search-results/
Matthew,
I’ve just rolled out an update (v1.4.1) which adds the ability to turn off the HTML encoding changes I made for v1.4. This should hopefully resolve your problem whilst enabling you to benefit from the bug fixes/features introduced in v1.4. For more info on v1.4.1 check out http://richhewlett.com/2012/09/19/live-writer-syntax-highlighting-plug-in-minor-update/
Rich
Actually it doesn’t have to be hosted on WP.com. I have a self-hosted blog, and the plugin is working fine; you just need to install the “SyntaxHighlighter Evolved” WordPress plugin.
Thanks for the info Thomas it’s good to know its useful to even more people.
Rich
Works great except I am not seeing the “copy to clipboard” icon. Any ideas?
Thanks
Hi. Syntax Highlighter (on which the underlying WordPress.com Source Code highlighting functionality is built) uses Adobe Flash for the ‘Copy To Clipboard’ feature. This means if you don’t have Flash installed/enabled in your browser then you don’t see the Clipboard icon. I believe that the latest version of Syntax Highlighter avoids the use of Flash and so this problem should go away once WordPress.com update to the newer version under the hood.
I hope this helps.
Rich
I picked up that Hootsuite’s Hootlet extension for Google Chrome messes up #region and #endregion tags in code snippets I inserted with this plugin. I pretty sure this is Hootsuite’s problem, but I thought I would just give a heads up. There are some screenshots of the problem on my blog: http://pagehalffull.wordpress.com/2012/11/28/how-the-hootsuite-hootlet-broke-my-browser-kindof/
Glad you like the plugin. Thanks for heads up on this issue, hopefully HootSuite will resolve this soon.
Rich
Rich, how is the HTML formatting supposed to work? Do we choose XML? I tried that and the markup just changed to (ul)(li)My Content(/li)(/ul) etc. Is this as designed? It’s mid way down my post. http://blog.aptillon.com Step 8 under Integrating with Search. Thanks!
I fiddled with it and got a brush not configured error. Then I just copied the settings from another section to get it to work. How’s it supposed to work for plain HTML?
Hi Matthew, v1.4 of my plugin added html to the language dropdown and so for plain HTML select that option. Also if you experience any strange encoding issues (which seem to depend on the site design) then the latest plugin version v.1.4.1 provides an encoding override switch (see http://richhewlett.com/2012/09/19/live-writer-syntax-highlighting-plug-in-minor-update/ for more info). If you are using an older version of my plugin then selecting XML was the only way to go but the syntax highlighter wordpress plugin seemed to struggle sometimes with using XML for HTML.
Hope this helps.
Rich
Yep, it appears that the Theme plays a big role in how well things work.
Just amazing, boy. This is what I call doing a GOOD action for mankind!