Matt's blog

Syntax Highlighter for Umbraco 4

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. Well I came across an article here that came very close, but was slightly outdated. Kristian has done a great job though of outlining what needs to be done though. My goal is to target a more update-to-date version of SyntaxHighlighter.

You can follow Kristian's howto, but once you get to the part to install the SyntaxHighlighter you'll need to follow these steps.

Download SyntaxHighlighter here. At the time of this article the version is 2.1.364

Place the script and style folder in a new directory called "SyntaxHighlighter" in your umbraco root folder.

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

<!-- 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>

Last but not least the SyntaxHighlighter Plugin for Tinymce that you downloaded needs to be updated. Right now the plugin uses a textarea, and the name attribute to work. This will need to be modified to work with a pre tag and class attribute instead. Crack open \umbraco_client\tinymce3\plugins\codehighlighting\js\codehighlighting.js and modify it like so.

function Save_Button_onclick() { 
        var lang = document.getElementById("ProgrammingLangauges").value;
        var code = WrapCode(lang);

        code = code + document.getElementById("CodeArea").value.replace(/</g, "<").replace(/>/g, ">").replace(/&/g, "&");
        code = code + "</pre> ";
        if (document.getElementById("CodeArea").value == '')
        tinyMCEPopup.close(); return false;
    
        tinyMCEPopup.execCommand('mceInsertContent', false, code); 
    
        tinyMCEPopup.close();
    }

Basically what I've done is changed the code to output a pre tag instead of a textarea, and included the brush: syntax right before the language type in the class attribute.

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