Jacmoe's Cyber Soapbox

A programmers blog without syntax highlighting?

No, that's not possible!

This post shows how to add that to Croogo with minimal changes.

1) Download SyntaxHighlighter from http://alexgorbatchev.com/wiki/SyntaxHighlighter

2) Download the TinyMCE plugin from this page: http://www.willdurand.fr/articles/10/syntaxhighlighter-tinymce-et-yml.html

3) Unpack and upload SyntaxHighlighter to app/webroot/js directory (app/webroot/js/syntaxhighlighter).

4) Unpack and upload the codehighlighting TinyMCE plugin to app/webroot/js/tinymce/plugins/codehighlighting.

5) Move all files (images and css) from app/webroot/js/syntaxhighlighter/styles to app/webroot/css.

6) Edit app/views/layouts/default.ctp.

a) Find echo $html->css and add these lines to the array:

            'shCore.css',
            'shThemeDefault.css',

b) Add the following lines to the html script array:

            'syntaxhighlighter/scripts/shCore.js',
            'syntaxhighlighter/scripts/shBrushBash.js',
            'syntaxhighlighter/scripts/shBrushCSharp.js',
            'syntaxhighlighter/scripts/shBrushCpp.js',
            'syntaxhighlighter/scripts/shBrushCss.js',
            'syntaxhighlighter/scripts/shBrushDelphi.js',
            'syntaxhighlighter/scripts/shBrushDiff.js',
            'syntaxhighlighter/scripts/shBrushJScript.js',
            'syntaxhighlighter/scripts/shBrushPerl.js',
            'syntaxhighlighter/scripts/shBrushPhp.js',
            'syntaxhighlighter/scripts/shBrushPlain.js',
            'syntaxhighlighter/scripts/shBrushPowerShell.js',
            'syntaxhighlighter/scripts/shBrushPython.js',
            'syntaxhighlighter/scripts/shBrushRuby.js',
            'syntaxhighlighter/scripts/shBrushScala.js',
            'syntaxhighlighter/scripts/shBrushSql.js',
            'syntaxhighlighter/scripts/shBrushVb.js',
            'syntaxhighlighter/scripts/shBrushXml.js',

c) Add this just before echo $scripts_for_layout:

        echo $this->Html->scriptBlock("
            SyntaxHighlighter.config.clipboardSwf = 'js/syntaxhighlighter/scripts/clipboard.swf';
            SyntaxHighlighter.config.stripBrs = true;
            SyntaxHighlighter.defaults['wrap-lines'] = true;
            SyntaxHighlighter.all();
        ");

7) Edit app/views/helpers/tinymce.php.

a) Add these lines to the startup script string:

 extended_valid_elements: "-pre[name|class|cols|rows]", 
    remove_linebreaks : false,

b) Find the list of plugins and add codehighlighting to it:

plugins : "safari, pagebreak, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template, codehighlighting",

c) Find the list of buttons and add codehighlighting to it - I put it in the theme_advanced_buttons3 section, just before the charmap:

theme_advanced_buttons3 : "tablecontrols, |, hr, removeformat, visualaid, |, sub, sup, | , codehighlighting, charmap, emotions, iespell, media, advhr, |, print, |, ltr, rtl, |, fullscreen",

If everything went right, you should now see a new button in your editing toolbar:

And you're highlighted!