Webbed IT

developing and hosting web sites and applications for the Third Sector and SMEs since 2003

Integrating SyntaxHighlghter with TinyMCE in a CakePHP Site

Posted Apr 15th 2011, 19:26 by PaulGardner

Better late than never!

Way back in February 2010 I wrote about how to integrate TinyMCE into CakePHP along with the File and Image Manager plugins. At the end of that article I said I'd write further TinyMCE related entries, but up until now have not gotten around to doing so.

Well, as I've recently made myself a promise to blog at least once a week, it makes sense that I start by writing those articles I promised 14 months ago.

What is SyntaxHighlighter?

The clue is in the name, SyntaxHighlighter is a JavaScript plugin which takes blocks of code and highlights the syntax within them. It comes with a bundle of nearly 30 'Brushes', each allowing you to display a different language such as PHP, JavaScript, ActionScript3, C++, Ruby and even Bash/Shell commands.

Installation

First download the plugin and extract it to /app/webroot/js/syntaxhighlighter and as I prefer to keep my CSS files in one place I move the /app/webroot/js/syntaxhighlighter/styles folder to /app/webroot/css/syntaxhighlighter.

Now we need to link to the core CSS and Javascript files as well as adding links to the brushes we intend to use (I use PHP, JavaScript and Bash brushes in this site). In CakePHP we would add the following to /app/views/layouts/default.ctp.

<head>
...
<?php echo $html->css('syntaxhighlighter/shCore'); ?>
<?php echo $javascript->link('syntaxhighlighter/src/shCore'); ?>
<?php echo $javascript->link('syntaxhighlighter/scripts/shBrushPhp'); ?>
<?php echo $javascript->link('syntaxhighlighter/scripts/shBrushJScript'); ?>
<?php echo $javascript->link('syntaxhighlighter/scripts/shBrushBash'); ?>
...
</head>

All this does is uses CakePHP's Html and Javascript helpers to output the following HTML source code (which is what you would include in a non-CakePHP site).

<head>
...
<link rel="stylesheet" type="text/css" href="/css/syntaxhighlighter/shCore.css" />
<script type="text/javascript" src="/js/syntaxhighlighter/src/shCore.js"></script>
<script type="text/javascript" src="/js/syntaxhighlighter/script/shBrushPhp.js"></script>
<script type="text/javascript" src="/js/syntaxhighlighter/script/shBrushJScript.js"></script>
<script type="text/javascript" src="/js/syntaxhighlighter/script/shBrushBash.js"></script>
...
</head>

We then need to include a call to SyntaxHighlighter.all() to tell the page to search for code blocks. We do this by adding the following JavaScript just before the closing </body> tag (ensuring your blocks of code have been loaded into the DOM first).

<script type="text/javascript">
  SyntaxHighlighter.all();
</script>

If using jQuery I would wrap the above in a $jQuery.ready() function as follows so I could place the call to SyntaxHighlighter.all() anywhere I wanted in the page and it would not run until the page has fully loaded catching all blocks of code.

<script type="text/javascript">
$(document).ready(function() {
  SyntaxHighlighter.all();
});
</script>

Time to insert some code

At this point we're ready to find code blocks and add syntax highlighting using our PHP, JavaScript and Bash brushes, so we just need some code.

SyntaxHighlighter expects code to be wrapped in either <pre /> or <script /> tags with special class attribute values (i.e. <pre class="brush: php;fontsize: 100; first-line: 1;>enter code here</pre>).

I choose to use the <pre /> tag, but more details about the pros and cons of each method are available on the installation pages of the SyntaxHighlighter site for you to make up your own mind on which tag to use.

As the subject of this article is how to insert code blocks using TinyMCE we will move straight onto downloading and installing 27smiles' SyntaxHL plugin and then tan73's PreElementFix plugin which resolves some issues around using <pre /> tags within TinyMCE. If at this point you do not have TinyMCE installed and working, complete the how to integrate TinyMCE into CakePHP tutorial before continuing.

First download the SyntaxHL plugin and extract to /app/webroot/js/tiny_mce/plugins/syntaxhl then download the PreElementFix plugin and extract to /app/webroot/js/tiny_mce/plugins/preelementfix.

Next, replace lines 11-18 of /app/view/helpers/tiny_mce.php with the following

    ...
    var $defaults = array(
      'theme'=>'default',
      'mode'=>'textareas',
      'plugins'=>'safari,table,advimage,imagemanager,advlink,filemanager,paste,inlinepopups,syntaxhl,preelementfix',
      'dialog_type'=>'modal',
      'convert_urls'=>true,
      'relative_urls'=>false,
      'extended_valid_elements'=>"pre[name|class]"
    );
    ...

Here we've added syntaxhl and preelementfix to the plugins parameter and included the extended_valid_elements parameter to stop TinyMCE stripping name and class attributes from <pre /> tags as we insert them.

All that remains is to add a button to our TinyMCE editor and we're ready to insert some code. To do this edit the t.settings parameters in /app/webroot/js/tiny_mce/themes/default/editor_template.js adding syntaxhl to one of the three rows of buttons available for the template.

If editing the template settings I used in the tutorial how to integrate TinyMCE into CakePHP it would look like the following:

init : function(ed, url) {
  var t = this, s, v, o;
 
  t.editor = ed;
  t.url = url;
  t.onResolveName = new tinymce.util.Dispatcher(this);
 
  // Default settings
  ed.settings.skin = "o2k7";
  ed.settings.skin_variant = "silver";
 
  t.settings = s = extend({
    theme_default_path : true,
    theme_default_toolbar_location : "top",
    theme_default_toolbar_align : "center",
    theme_default_buttons1 : "undo,redo,|,bold,italic,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,blockquote,charmap,|,link,unlink,anchor,image,insertfile",
    theme_default_buttons2 : "formatselect,|,tablecontrols,|,cleanup,code,syntaxhl",
    theme_default_buttons3 : "",
    theme_default_blockformats : "p,h2,h3,h4",
    theme_default_row_height : 23,
    theme_default_resize_horizontal : 1,
    theme_default_resizing_use_cookie : 1,
    readonly : ed.settings.readonly
  }, ed.settings);
...

Notice how I've added the syntaxhl button to the end of theme_default_buttons2. Next time I load the TinyMCE editor I will see a icon at the end of the 2nd row of buttons.

Clicking the icon opens a new Insert code using SyntaxHighlighter dialog window. From here I select which brush I want to use, paste or type my code into the text area then insert the code which returns me to the TinyMCE editor.

Not stylish enough?

So now we can add code blocks via TinyMCE and when viewing your web pages that code is magically styled and coloured making it a pleasure for all to read, even if very few people understand what the code does.

But what if you could make the code blocks look even nicer I here you ask? Well, the astute amongst you should have noticed if looking at the CSS files that came with SyntaxHighlighter(originally in the /styles folder) that there is an array of extra CSS files. If we swap our CSS link from ...

<?php echo $html->css('syntaxhighlighter/shCore'); ?>

to ...

<?php echo $html->css('syntaxhighlighter/shCoreRDark'); ?>

... we apply an alternative styling which I believe works much better on a white page by providing a dark frame for the code block. Experiment with the themes yourself by swapping shCore.css with one of the following:

shCoreDefault.css
shCoreDjango.css
shCoreEcplise.css
shCoreEmacs.css
shCoreFadeToGrey.css
shCoreMidnight.css
shCoreRDark.css

Special mentions

Without the following people I would not have been able to do the above myself and in turn would not have written this article that you can hopefully benefit from, so it's only right that I give credit to them:

MoxieCode: Developers of the open-source TinyMCE WYSIWYG Editor
Alex Gorbatchev: Developer of the open-source SyntaxHighlighter
Rich Grundy: Developer of the SyntaxHL TinyMCE Plugin
Thomas Anderson: The developer of the PreElementFix plugin
Ellis Web: The blogger who put me onto the PreElementFix TinyMCE Plugin

Tags: cakephp tinymce syntaxhighlighter plugins tutorial

2 Comments

May 26th 2011, 15:11 by HT

SyntaxHighter: Can't find brush for: php
What is that problem?
Jun 15th 2011, 16:11 by PaulGardner

Sorry for late reply, somehow missed you off my todo list :?

SyntaxHighlighter cannot find the PHP Brush. Are you sure you included the javascript link to the brush? (see my the first block of code in the tutorial above).

If you have a live page I can see then I could have a look for you.

Thanks for reading,

Paul.

Why not leave a comment for the author and others to read?

Get In Touch

0191 536 4781
07766 811188
info@webbedit.co.uk

Keep In Touch

Twitter Updates

terms of use
site map