Successfully install Syntax Highlighter into my Blogger

Cheers. Finally I have successfully configure Syntax Highlighter into my blogger. Thanks to Scott Meyers's post on how this could be done and I really appreciate his effort on posting it up.

Before this, I did try to install Syntax Highlighter from Google code but failed to configure it. Then I tried snipt.net, but this one is a bit slow and cumbersome because I need to edit it somewhere then post it back here. What if their server gone down, or their services has gone? That's why I so keen to Syntax Highlighter because of its functions are self-contained. Meaning I no more require to edit some where and post a link here.

With this post from One Q, One A blog, things is much more easier. It really goes into a level where I don't need my brain to do the configuration. And the most annoying one is transforming angle bracket '<' and '>', I use this tool called Encode/Decode HTML Entities to handle this for me.

Below is my experiment usage of Syntax Highlighter on XHTML code:

1. I put my code right under the compose mode inside the Blogger. (Before this I have already encode those HTML entities.)
2. Define a xhtml brush in HTML mode in the beginning of the code, like this: <pre class="brush:xhtml;">
3. Put this </pre> at the end of the code.

Sample Output

<h:form id="theForm">
  <h:commandLink id="tri_HiddenEvent" value="Trigger Hidden Event" onclick="triggerHiddenEvent(); return false;"/>
      
  <p style="display:none">
    <h:commandLink id="hiddenCommand" styleClass="button" action="#{helloBean.doHiddenCommand}">
      <f:ajax execute="@form"/>
    </h:commandLink>
  </p>
      
  <ui:remove>f:ajax doesn't support inputHidden</ui:remove>
<h:form>

There are a lot more brushes available for all kind of code in this manual. Enjoy blogging.