Code Snippet With Syntaxhighlighter Support for Windows Live Writer

Home
Releases
Discussions
Issue Tracker
Source Code
Stats
People
License
 
Comments | Print View | Page Info | Change History (all pages)
Search Wiki:
Home
Project Description
A code snippet plugin for Windows Live Writer with support for Syntaxhighlighter as well as good support for snippet indentation.

This code snippet Windows Live Writer plugin supports Syntaxhighlighter and will add the required code class attributes when selected.

PreCode Code Snippet Plugin


How to Enable Syntaxhighlighter Support

For syntax highlighting you will need to add support for the Syntaxhighlighter JavaScript and CSS library - which you can download from Syntaxhighlighter. There are several way you can configure this on your site - here's one option.

  1. Download the support files from Syntaxhighlighter and place them in a directory called scripts
  2. Add the style sheet to the <head> section of your site <link type="text/css" rel="stylesheet" href="scripts/SyntaxHighlighter.css"></link>
  3. Add the JavaScript references to your website as follows - placing them just before the closing </body> tag at the
bottom of the page (with as many language brush scripts as you'd like to support):

<script language="javascript" src="scripts/shCore.js"></script>
<script language="javascript" src="scripts/shBrushCSharp.js"></script>
<script language="javascript">
    dp.SyntaxHighlighter.ClipboardSwf = 'scripts/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
 </script>



Anthony Bouch (http://www.58bits.com)
Thanks to Alexander Groß for the UpdateableComponent bits (http://www.therightstuff.de/)
Last edited Jul 17 at 4:58 AM  by Abouch, version 17
Comments
mvargas wrote  Jul 17 at 1:20 AM  
All the Syntax Highlighting options are disabled for me. How do you enable this? I've downloaded the Syntax Highlighter files but there's no installer or anything, and no indication of which folder I should place them in.

Abouch wrote  Jul 17 at 4:21 AM  
Hi - Syntax highlighting options are only enabled when you choose to wrap your snippet in a <pre> tag, or a <textarea> tag - since these are the only two tags that are used by the Syntaxhighlighter lib. If you choose 'Nothing', or <blockquote> then the Syntax highlighting panel will be disabled.

As for installing the Syntaxhighlighter files themselves - they're a JavaScript library that you need to include in the site you are posting your blog post to. Check-out the examples at http://code.google.com/p/syntaxhighlighter/ - you'll need to create some JavaScript references.

Once you've included the JavaScript - you'll then need to initialize the Syntaxhighlighter feature - typically with a call to the lib just before the end of the <body> tag at the bottom of your page - like this...

dp.SyntaxHighlighter.HighlightAll('code',true,false,false,1,false);

(I actually wrap these in a jQuery call on my site but if you want to see a working example go to http://www.hanselman.com/blog/ - and choose View Source from your browser. Go down to the very bottom of the page - and you'll see how Scott is including the Syntaxhighlighter javascript files.)

Hope this helps

Tony

Sign in to add a comment

Downloads


Current release:
Version 2.0.4
Wed Jul 16 2008 at 7:00 AM
139 downloads


Activity

7 30 All days
Page Views
36
Visits
12
Pages Per Visit
3.00
Work Items Closed
0
Discussion Posts
0
© 2006-2008 Microsoft | Privacy Statement | Terms of Use | Code of Conduct | CodePlex Blog | Version 2008.8.12.13328
Updating...