www.RickLaFleur.com

Following provides details on adding the Google SyntaxHighlighter to a non Blogger site.

• Visit the syntaxhighlighter home page, read the minimal documentation available, and then download the kit.
• Distribute the files of the kit to your Web site; note I chose to use wwwroot/js for the scripts and wwwroot/css for the style sheet file rather then the default file structure of the kit.
• Edit your Web page template and add the following just before the closing body tag:

<link type="text/css" rel="stylesheet" href="/css/SyntaxHighlighter.css"></link>
<script language="javascript" src="/js/shCore.js"></script>
<script language="javascript" src="/js/shBrushCSharp.js"></script>
<script language="javascript" src="/js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

• Add example code to your page within pre tags, replacing any < or > characters with their html equiv:

<pre name="code" class="c-sharp">
string [] s = {"a", "b", "c"};
for (int i = 0; i < s.Length; i++)
{
    Console.WriteLine(s[i]);
}
</pre>

However, if using integrating with Blogger you may observe some problems - if so check out this article.

Labels: code, html, JavaScript

posted by RickLaFleur.com  # Monday, October 06, 2008