Zotonic syntax highlighting

If your Zotonic blog is all about code you need syntax highlighting. Zotonic uses TinyMCE and this short post shows how to install the syntaxhl plugin for TinyMCE and its only dependency, Syntax Highlighting.

(Update: 2013-01-01, when browsing the Zotonic Module Repo today I came across mod_syntaxhighlighter.)

Installing the syntaxhl plugin 

Richard Grundy's syntaxhl is a plugin for TinyMCE, the Javascript WYSIWYG editor Zotonic uses. So, first of all let's install this plugin.

$> cd zotonic/priv/<yoursite>/lib
$> mkdir js/modules/tinymce3.5.0/plugins
$> cd js/modules/tinymce3.5.0/plugins
$> git clone https://github.com/RichGuk/syntaxhl.git 
$> vim <yoursite>/templates/_admin_tinymce_overrides_js.tpl
tinyInit.plugins += ",syntaxhl"; 
tinyInit.theme_advanced_buttons1 += ",|,syntaxhl";

You should now see a highlighter icon next to the image icon in your editor's toolbar as depicted below.

TinyMCE toolbar with syntaxhl icon

If you test the plugin, you will find that your code is formatted as a <pre> block with some css classes but there's no actual highlighting yet. That's because syntaxhl depends on Syntax Highlighter which we are going to install next.

Installing Syntax Highlighter

Alex Gorbatchev's Syntax Highlighter performs the actual formatting. Let's install it.

$> cd zotonic/priv/<yoursite>/lib
$> wget http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current
$> unzip download.php\?sh_current 
%> rm download.php\?sh_current 

Now we need to add some CSS and JavaScript to our page template. Open templates/base.tpl in a text editor and update the lib section to include the required files as shown below. Then add a javascript tag and initialize the highlighter. 

{% lib
        "bootstrap/css/bootstrap.min.css"
        "bootstrap/css/bootstrap-responsive.min.css"
        "css/jquery.loadmask.css"
        "css/z-menu.css"
        "css/project.css"
        "syntaxhighlighter_3.0.83/scripts/shCore.js"
        "syntaxhighlighter_3.0.83/styles/shCore.css"
        "syntaxhighlighter_3.0.83/styles/shThemeEclipse.css" 
        "syntaxhighlighter_3.0.83/scripts/shBrushErlang.js"
        "syntaxhighlighter_3.0.83/scripts/shBrushBash.js"
        "syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"
%}

{% javascript %}
        SyntaxHighlighter.all();
{% endjavascript %}

Add as many brushes as you need. There are also various themes you can chose from. I decided to use the Eclipse theme. Check out this page to preview all of them.  That's it. Reload your page and your code should be highlighted. 

If you find that Syntax Highlighter creates unnecessary scroll bars the following CSS might help, as pointed out in this blog.

.syntaxhighlighter { overflow-y: hidden !important; }

Conclusion

There you have it. Code highlighting for your Zotonic site. Frankly, I find tinyMCE too finicky. I personally prefer to write markdown or something like that rather than to battle with a WYSIWYG editor. Fortunaltely there's already talk about markdown on the zotonic dev group. Maybe soon we can create as beautiful blogs about code as one can with Octopress.

Thanks for taking the time to read this post. I hope it was helpful.



blog comments powered by Disqus
10 October 1990 - 10:11:12 10 October 1990