Friday, October 22, 2010

SyntaxHighlighter and Blogger

Ironically, it took me a little while to futz around with syntaxHighlighter to get it to work nicely with blogger so I could post my first post...which will now be my second post since my first post is now going to be about syntaxhighlighter and blogger. After a little bit of googling, I found myself at this very helpful post from Tips for software engineer. However, as I'm sure many of you fellow googlers have found out, sometimes these helpful posts are slightly dated and don't have up to date information on how to get things done. Following the directions on his post, I attempted my first test post by copying and pasting from some xml from Gedit. And for some reason, I ended up with:





For whatever reason, there was an extra line break inserted between each of these lines...which was driving me crazy. That's not very useful at all for copying and pasting. After a bit more searching, it turns out SyntaxHighlighter now has a fix for the extra <br /> that Blogger inserts into posts which causes the extra line breaks:

Note the "dp.SyntaxHighlighter.BloggerMode();" on line 2. Now this is looks all great and dandy, first tests posts *still* had the annoying extra line breaks. The solution appears to be changing some 'default' blogger settings. Expand the Post Options underneath the box where you are entering your post and make sure that [Use <br / > tags] is selected for Edit HTML Line Breaks.


Ah, much better.

Of course while I am trying to write this post, I realized that SyntaxHighlighter has a new website with a new version and new functionality, which for whatever reason is *not* the first result returned in google...okay, it's the third.  Anyways, to add to the plethora of available step by step instructions available for getting SyntaxHighlighter to work with Blogger that worked for me:

  1. Download the latest release here as well as an older release here.
  2. Unzip the files and then upload the following to a host of your choice (I use Google Sites, yay for free! EDIT: Site must be viewable by public):
    • From the current release folder:
      • shcore.css - Core stylesheet
      • shThemeDefault.css - At least one theme, I chose the default theme. 
      • shCore.js - Core javascript
      • shBrushXML.js - As many javascript brushes as you want,
    •  From the older release folder:
      • clipboard.swf - code to enable clipboard, not sure why is not included in the current release folder.
  3. In your Blogger account, go to the Design tab, and then select the Edit HTML sub-tab.
  4. Download your template as it is now somewhere in case everything goes whacky and you need to go back to the original.
  5. Insert the following code snippet into the Edit Template box just before the </body> tag.
        <link href='http://where.your.stuff/is/hosted/syntaxhighlighter/shCore.css' rel='stylesheet' type='text/css'/>
        <link href='http://where.your.stuff/is/hosted/syntaxhighlighter/shThemeDefault.css' rel='stylesheet' type='text/css'/>
        <script type="text/javascript" src='http://where.your.stuff/is/hosted/syntaxhighlighter/shCore.js'/>
        <script type="text/javascript" src='http://where.your.stuff/is/hosted/syntaxhighlighter/shBrushBash.js'/>
        <script type="text/javascript" src='http://where.your.stuff/is/hosted/syntaxhighlighter/shBrushJava.js'/>
        <script type="text/javascript" src='http://where.your.stuff/is/hosted/syntaxhighlighter/shBrushJScript.js'/>   
        <script type="text/javascript" src='http://where.your.stuff/is/hosted/syntaxhighlighter/shBrushPerl.js'/>
        <script type="text/javascript" src='http://where.your.stuff/is/hosted/syntaxhighlighter/shBrushPhp.js'/>
        <script type="text/javascript" src='http://where.your.stuff/is/hosted/syntaxhighlighter/shBrushPython.js'/>
        <script type="text/javascript" src='http://where.your.stuff/is/hosted/syntaxhighlighter/shBrushXml.js'/>
        <script language='javascript'>
          SyntaxHighlighter.config.bloggerMode = true;
          SyntaxHighlighter.config.clipboardSwf = 'http://where.your.stuff/is/hosted/syntaxhighlighter/clipboard.swf';
  6. Save the template
  7. When you go to make your first post using this, make sure that under Post Options, Use <br / > tags is selected for Edit HTML Line Breaks.
  8. When you are editing your post and need to insert a bit of code for the syntax highlighter, switch to the Edit HTML tab of the editor and insert the following:
        Some other xml stuff
    Where you substitute "brush:xml" with "brush:[whichever brush you are using]".
One weirdness I also noticed is that sometimes it looks likes it's not working, but waiting a few seconds and refreshing, everything is okay again.

Hopefully this was helpful to someone...and hopefully I haven't been too redundant.

No comments:

Post a Comment