Windows Live Writer Codehighlighting Plugin For Alex Gorbatchev's SyntaxHighlighter

Windows Live Writer Codehighlighting Plugin For Alex Gorbatchev's SyntaxHighlighter is available on codeplex

12/22/2010 9:44:00 AM 6 comments 4982 times

If you have a blog and your blog’s main topic is programming, you are most probably using a syntax highlighter (If you are not, better start to use one because pasting the code as plain text is lame, dude !) to highlight the codes you put on your blog post.

I use Alex Gorbatchev’s SyntaxHighlighter because it has what I need (except the razor syntax highlighter) and implementation is so easy. Also it is the most decent plugin for blogs.

The plugin supports lots of languages like C#, T-SQL, CSS, XHTML, Java, JavaScript, VB.Net, Ruby, PHP, C++, Delphi and so on (but still not support for Razor Syntax).

After setting up the necessary script files, you will be good to go by adding the following code inside your page (You should add the following code after adding the script files);

        <script type="text/javascript">

            SyntaxHighlighter.all();

        </script>

Pretty straight forward. I am not going to walk you through how it works because you most probably know how it works if you’re reading this article. If you don’t, you will be able to find more info about Alex Gorbatchev's SyntaxHighlighter here.

But the deal is how to add the proper code text into our blog post so that it will be highlighted properly. TinyMCE which is a pretty great HTML editor has a plugin for inserting the code for SyntaxHighlighter. We have no problem and headache there. But how about Windows Live Writer ? I have been using WLW (which stands for Windows Live Writer [not officially but I made it up {I don’t know maybe that is the official abbreviation}]) for like a month and it has been a great pleasure to use it.

You could use WLW with your own blog now. Scott Hanselman has a walkthrough blog post about how to implement MetaWeblogAPI into your application. It will just take 20 to 40 minutes to implement the functions (It is easier if you are using LINQ to Entities or LINQ to SQL) The best thing is you will be able to validate the users with built in ASP.Net Membership API.

I searched a lot to find a plugin for Alex Gorbatchev’s SyntaxHighlighter but I couldn’t find any. I thought that that would be perfect to create one. So I created one.

The plugin is so easy to use and its functions are nearly the same as the TinyMCE plugin.

Language Selection

Language selection is enabled with a dropdown list. I just added couple of language choices. I thought that would be enough.

Additional Options

Alex Gorbatchev’s SyntaxHighlighter is a very flexible tool. We could determine a few options as we want. You could determine them easily with the checkboxes on the bottom of the dialog box.

HTML Encoded Output

TinyMCE Plugin for inserting the code is outputting the content as it is and it is a headache for me. When you add HTML or XML code to be highlighted, it won’t be displayed inside the RSS readers because the page will define them as a code tag. Alex Gorbatchev’s SyntaxHighlighter supports Encoded HTML as well. So the code will be HTML encoded output with the Windows Live Writer plugin.

With Line Breaks Option

Sometimes windows live writer wrapping up the source code when you view the source code. I couldn’t find how to disable that (I would appreciate if anybody tell me how). That cause the code text to be a in less line that it should be. So I have added a checkbox next to language selection list : “With Line Breaks”. If you check that option before inserting the code, ‘\n’ chars will be replaced with ‘<br/>’ so we will be able to preserve the lines.

Downloading and Installing the Windows Live Writer Codehighlighting Plugin For Alex Gorbatchev's SyntaxHighlighter

I have uploaded the project into CodePlex as msi file. Only you need to do is to download the project and install it. After the installation, you will see the plugin among your Window Live Writer plugins.

Project Download Page : http://syntax4writer.codeplex.com/

Please provide your feedbacks for this little project by writing a comment under this post.

Enjoy the blogging :)

Update on 25.01.2011

The setup is also available on Windows Live Writter Plugins official web site. The direct link of the project is http://plugins.live.com/writer/detail/syntax4writer-for-alex-gorbatchevs-syntaxhighlighter

Comments

#139

re: Windows Live Writer Codehighlighting Plugin For Alex Gorbatchev's SyntaxHighlighter

by Adam Dunkie on 12/24/10 15:24:44 Friday (UTC -05:00)

Very smooth and easy to use. loved it. thanks !

#141

re: Windows Live Writer Codehighlighting Plugin For Alex Gorbatchev's SyntaxHighlighter

by Tugberk on 12/28/10 12:51:58 Tuesday (UTC -05:00)

The plugin is now available on Windows Live Writer Plug-ins.

Direct download link :

http://plugins.live.com/writer/detail/syntax4writer-for-alex-gorbatchevs-syntaxhighlighter

#2085

re: Windows Live Writer Codehighlighting Plugin For Alex Gorbatchev's SyntaxHighlighter

by Edward de Leau on 03/18/11 17:01:08 Friday (UTC -04:00)

Nice plugin! I use it together with http://wordpress.stackexchange.com/questions/6695/code-friendly-block-quotes and http://wordpress.org/extend/plugins/visual-code-editor/

Can I somehow prevent the html encoding in the source code view when having tagged a piece of code as PRE and having put [sourcecode] blocks around them? (the last one to prevent code mangling up in WordPress) ?

#2086

re: Windows Live Writer Codehighlighting Plugin For Alex Gorbatchev's SyntaxHighlighter

by Tugberk on 03/18/11 22:37:00 Friday (UTC -04:00)

@Edward de Leau

I am affraid I didn't support to swap between html encoded and not html encoded source code. however, it's weird that u're having trouble with that. can you give me and live example url?

Also, I strogly encourage you to have a look at Alex Gorbatchev’s SyntaxHighlighter page for correctly implementing the plug-in.

#2087

re: Windows Live Writer Codehighlighting Plugin For Alex Gorbatchev's SyntaxHighlighter

by Glen on 03/23/11 0:59:31 Wednesday (UTC -04:00)

SyntaxHighlighter supports Powershell. Is there a way that you could do the same?

#2088

re: Windows Live Writer Codehighlighting Plugin For Alex Gorbatchev's SyntaxHighlighter

by Tugberk on 03/23/11 1:22:09 Wednesday (UTC -04:00)

@Glen

if you are talking about the powershell syntax highlighting support, you're absoulutely right about that. I should have added that at the first place. That will be up and running on the next release.

For now you could do some temporary fixes;

Go to the project home page and step into donwload section there. You will see a source code download under the name of 'v3.5.4007.42031 Source Code'. You could grab that and add the powershell support by yourself. Direct link of the source code is here; http://syntax4writer.codeplex.com/releases/57948/download/219578
There is another way of making this work. After adding your powershell code, go to the source code of your post from WLW and edit the brush manually so that it will be supported.

Also, conside that the project is open source. If you would like to make a contribution, you could do that through codeplex.

Hope this helps.

Additional allowed tags : [quote]...[/quote], [user]...[/user]