Matt's Blog

It's been a challenge for the past couple weeks to integrate a syntax highligher into Umbraco. I've done countless Google searches, read blogs, form posts and how-to articles, but I still haven't come across an update-to-date syntax highlighter tutorial for Umbraco 4. I've decided to rewrite this article to use more up-to-date methods and libraries, and to also provide a full explanation of setting up a syntax highlighter in Umbraco 4.5

There are two parts the the syntax highlighter.

• Client side javascript to display and colour the code
• Tinymce plugin to make it eaiser to manipulate content

We're first going to start with the tinyMCE plugin. There are many plugins to choose from for tinyMCE. At the time of this article I choose Rich Guks syntakhl. Download syntaxhl and put it in your umbraco_client\tinymce3\plugins folder. Make sure the folder has read permissions allowed.

Next we need to tell Umbraco that we want to use the plugin we just installed. Crack open config\tinyMceConfig.config and add the following to the commands element.

<command>
   <umbracoAlias>syntaxhl</umbracoAlias>
   <icon>images/editor/codehighlight.gif</icon>
   <tinyMceCommand value="" userInterface="true" frontendCommand="template">syntaxhl</tinyMceCommand>
   <priority>76</priority>
</command>

The priority number should be unique. Just increment it from the last command element you find. Mine happened to be 76.

Next add the following to the plugins element

<plugin loadOnFrontend="false">syntaxhl</plugin>

Save the config file and restart the website (open up and save web.config file). Now in the developer section of Umbraco, look up the Richtext editor datatype. In the buttons list should be your syntax highlighter button. Check the box to add it and then save the datatype. Now all of your Richtext editors in Umbraco will have the code hightlighter button appended to the end of the list. You can now start to write content that uses the syntax highlighter. This is only the first part. Now that we have the means to create and manipulate content as code, we need to display it on the client side using javascript library.

Download Alex Gorbatchev's SyntaxHighlighter library and add it to your websites script folder. At the time of this article the version was 3.0.83

Place the following code right before the </body> tag in your master page:

<!-- SyntaxHighlighter CSS and JavaScript -->
    <link type="text/css" rel="stylesheet" href="/syntaxhighlighter/styles/shCore.css">
    </link>
    <link type="text/css" rel="stylesheet" href="/syntaxhighlighter/styles/shThemeDefault.css">
    </link>

    <script type="text/javascript" src="/syntaxhighlighter/scripts/shCore.js"></script>
    
    <!-- Brushs! Include the file for each language you want to use -->
    <script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCSharp.js"></script>
    <script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushXml.js"></script>
    <script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushSql.js"></script>
    
    <script type="text/javascript"> 
        SyntaxHighlighter.config.stripBrs = true;
        SyntaxHighlighter.defaults['smart-tabs'] = true;
        SyntaxHighlighter.all(); 
    </script>

Thats it! I later plan to rewirte the tinyMCE plugin to include the new features of SyntaxHighlighter. Enjoy!