SyntaxHighlighter: Getting syntax highlighting feature here, there and everywhere – including on your blog…

Tonight as I am preparing the setup of a new Dynamicweb related blog (www.dwfeatures.com) I came across “SyntaxHightlighter” an open source Javascript client side code highlighter – I think that it is cool! So here is a short description of it so that you may start using it yourself.

Install plug-in on your wordpress blog

There are several plug-ins for wordpress which can use, I found Evolved interesting and installed it. Simply go in the control panel of your wordpress and click add new plug-in. Search for “ Evolved” and you will find it. Click install and activate!

SyntaxHighlighter Evolved plug-in for wordpress

You may need to do a few setting up:

image

The plug-in

If you use Windows Live Write for direct publishing to a blog like I do you can get a plugin to make your code look nice. You can do so by downloading and installing the free “Code Snippet With Syntaxhighlighter Support for Windows Live Writer” from http://precode.codeplex.com/. Its free and easy to install!

Simply download the MSI file and install it! Next time you start up Windows Live Writer you will have a new option under the “Insert” menu item: “Precode snippet”. Now you simply type or paste your code into the window, change the settings you want. One is ofcause the language, as you can see below in the screenshoot – the red box and arrow.

The plug-in in action in Windows Live Writer

The result – here on my blog..

Here is example of some code inserted using that module. This code is a Visual studio Snippet. Hope it looks okay :-)

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippet Format="1.0.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <Header>
    <Title>DW_IfDefined</Title>
    <Author>Sten Hougaard, 2010 - http://www.netsi.dk/wordpress</Author>
    <Shortcut>dynamicwebIfDefined</Shortcut>
    <Description>Surrounds selected data in Dynamicweb If and If Not defined</Description>
    <SnippetTypes>
      <SnippetType>SurroundsWith</SnippetType>
      <SnippetType>Expansion</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>tagname</ID>
        <Default>paragraphImage</Default>
      </Literal>
    </Declarations>
    <Code Language="HTML">
      <![CDATA[<!--@If Defined($tagname$)]]><![CDATA[-]]><![CDATA[-]]><![CDATA[>]]>
      $selected$
      <![CDATA[<!--@EndIf($tagname$)]]><![CDATA[-]]><![CDATA[-]]><![CDATA[>]]>

      <![CDATA[<!--@If Not Defined($tagname$)]]><![CDATA[-]]><![CDATA[-]]><![CDATA[>]]>
      NOT defined
      <![CDATA[<!--@EndIf($tagname$)]]><![CDATA[-]]><![CDATA[-]]><![CDATA[>]]>
    </Code>
  </Snippet>
</CodeSnippet>
US

Leave a Reply