Nimble Coder

Using dpSyntaxHighlighter in Subtext

I finally worked on my blog theme last night and I managed to get the dp.SyntaxHighlighter to work with Subtext. I recall seeing someone else use it with Subtext, but I can't locate the blog anymore.

Here are the steps involved:

1. Create a custom skin for Subtext
2. Copy the shCore.js, shBrushCSharp.js, shBrushXxx.js files in the custom skin Scripts directory (~/Skins/YourCustomSkin/Controls)
3. Copy the SyntaxHighlighter.css file to the custom skin Styles directory (~/Skins/YourCustomSkin/Styles). If you choose to use the Flash clipboard.swf functionality, place it in the root Scripts directory.
4. Create a Skins.User.config file in the ~/Admin directory. Add the following styles:
   

   <SkinTemplates
     xmlns:xsd="http://www.w3.org/2001/XMLSchema"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   >
     <Skins>
       <SkinTemplate Name="YourCustomSkin"
         TemplateFolder="YourCustomSkin">
         <Styles>
           <!-- Use an existing skin for a template
             to include a "normal" set of files. In
             this example, I only listed the one
             required style. -->
           <Style href="Styles/SyntaxHighlighter.css" media="all" />
         </Styles>
         <Scripts>
           <!-- Same as above. This is only a partial list
             of scripts, and a partial list of the highlighting
             files. There are more styles to include if you
             desire. -->
           <Script Src="Scripts/shCore.js" />
           <Script Src="Scripts/shBrushCpp.js" />
           <Script Src="Scripts/shBrushCSharp.js" />
           <Script Src="Scripts/shBrushJScript.js" />
           <Script Src="Scripts/shBrushPython.js" />
           <Script Src="Scripts/shBrushSql.js" />
           <Script Src="Scripts/shBrushVb.js" />
           <Script Src="Scripts/shBrushXml.js" />
         </Scripts>
       </SkinTemplate>
     </Skins>
   </SkinTemplates>
   

5. Modify the custom skin PageTemplate.ascx file to include the following code:
   

   <yourskin:Footer id="Footer" runat="server" />
   <script type="text/javascript">
     init();
     addLoadEvent(
       function() {
         dp.SyntaxHighlighter.ClipboardSwf = subtextBlogInfo.getScriptsVirtualRoot() + 'clipboard.swf';
         dp.SyntaxHighlighter.HighlightAll('code');
       });
   </script>

At this point you are ready to use the highlighter. Just to test, here is a little JavaScript:

// Append a new element to an existing element.
// Build the attributes from the attrs object.
function appendElem(elem, value, newNodeType, attrs)
{
  var t = document.createTextNode(value);
  if (newNodeType) {
    if (attrs && ("name" in attrs))
      newNodeType = "<" + newNodeType + " name='" + attrs["name"] + "'>";
    var n = document.createElement(newNodeType);
    if (attrs)
    {
      for (var attr in attrs)
      {
        var value = attrs[attr];
        if (attr == "class")
          n.className = value;
        else
          n.setAttribute(attr, value);
      }
    }
    n.appendChild(t);
    t = n;
  }
  elem.appendChild(t);
  return elem;
}

var elem = $("some-id"); // need prototype/jQuery...
appendElem(elem, "Testing", "textarea", {'class':'js', name:'code', cols:'40', rows:'5'});

Hopefully this will still work with RSS feeds and readers, otherwise I may be going back to the old method pasting code.

Print | posted on Friday, November 16, 2007 12:00 PM | Filed Under [ JavaScript ASP.NET ]