11.13.2009

SyntaxHighlighter with Subtext/GWB

I've been very frustrated with the lack of flexibility with wordpress.com hosted blogs, so I am yet again moving. This time I wanted to host my own instance of Subtext but discovered that geekswithblogs.net uses Subtext and figured I would give one last attempt to a hosted community online :) I guess I just don't want to deal with running my own server just for a blog.

The most important thing I wanted back was Syntaxhighlighter which was about impossible to use with wordpress.com without paying or running my own instance. I figured I would share how other people can use Syntaxhighlighter with Subtext.

What is it? It is a great tool to bring your code samples to life with very little trouble. All you have to do is mark them with <pre> tags and it does the rest. It supports pretty much any language you want to use and can be extended for others.

Steps to integrate with Subtext/GWB

  1. Pick a theme, I prefer the RDark theme.
  2. Modify Custom CSS under Options->Configure
    1. Add these css imports.

      @import url("http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"); @import url("http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css");
    2. Note: If you want a theme besides RDark, set that instead.
    3. Note: I have this setup to use the current version of SyntaxHighlighter, if you need an old version replace current in the url with the version.
  3. Modify Static News/Announcement in Options->Configure, if you have a SubText install you are hosting and you have the option for Sitewide Tracking code, you can use that as well.

    1. This is where you can insert the javascript needed to perform the highlighting.
    2. Include the shCore.js

         <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script&gt; 
        
    3. Include any brushes, I have c#,python,javascript and css included here:

          <script type="text/javascript" language="javascript"    src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js"></script&gt;
          <script type="text/javascript" language="javascript"    src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js"></script&gt;
          <script type="text/javascript" language="javascript"    src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js"></script&gt;
          <script type="text/javascript" language="javascript"    src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script&gt;
        
    4. Enable highlighting

        <script>
          SyntaxHighlighter.all();
        </script>
        
  4. See this link for how to use it.
    1. Huge Fail: FCKEditor, at least the version used here on GWB puts <br> tags in <pre> tags, stupid idiots, and it strips formatting so until this is fixed this will be a major pain, in the mean time I am using Windows Live Writer and I have the HTML formatting option set (turn off XHTML formatting or it will reformat pres).





comments powered by Disqus

Related Posts