Sorted By: Tag (projects)

Windows Live Writer Codehighlighting Plugin For Alex Gorbatchev's SyntaxHighlighter

Windows Live Writer Codehighlighting Plugin For Alex Gorbatchev's SyntaxHighlighter is available on codeplex
2010-12-22 07:44
Tugberk Ugurlu


http://www.tugberkugurlu.com/Content/Images/UploadedByAuthors/41/windows-live-writter-plug-in-after-inserted.pngIf 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.

http://www.tugberkugurlu.com/Content/Images/UploadedByAuthors/41/tinymce-pretty-great-html-editor.PNGhttp://www.tugberkugurlu.com/Content/Images/UploadedByAuthors/41/codehighlighting-plugin-for-tiny-mce.PNG

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.

http://www.tugberkugurlu.com/Content/Images/UploadedByAuthors/41/windows-live-writter-syntaxhighlihter-plug-in-window-language-selection.png

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.

http://www.tugberkugurlu.com/Content/Images/UploadedByAuthors/41/additional-choices-for-windows-live-writer-syntaxhighlither-plugin-.PNG

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.

http://www.tugberkugurlu.com/Content/Images/UploadedByAuthors/41/html-encoded-text-code-windows-live-writer-plugin-smooth-code.pnghttp://www.tugberkugurlu.com/Content/Images/UploadedByAuthors/41/html-encoded-text-code-windows-live-writer-plugin-encoded-code.png

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.

http://www.tugberkugurlu.com/Content/Images/UploadedByAuthors/41/with-line-breaks-choices-for-windows-live-writer-syntaxhighlither-plugin.PNG

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

http://www.tugberkugurlu.com/Content/Images/UploadedByAuthors/41/windows-live-writter-syntaxhighlihter-plug-in-window.pngI 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

Tags