Geshi Syntax Highlighting Helper for CakePHP

Mar 19th 2010, 10:07

Geshi is a very powerful highlighting tools. I searched the geshi helper for this CakePHP site, and found it on Mark Story blog. Thanks to Mark that have written the useful helper.

 

Later I found that I have to tweak Mark's helper because there are some problem with my environment. I want to add the helper ability to auto generate these things:

 

- Built-in geshi CSS for the highlighting text
- JavaScript for code/highlight switching

 

Also, I need to strip all "<br/>" to newline (\n) inside highlighting code that generated by my text editor (tinyMCE).

 

Here is my modification on file: app/views/helper/geshi.php

I added 3 private functions to get CSS, javascript and convert <br/> to new line

 

Show Plain Text
  1. private function getCSS() {
  2.     if(!$this->_geshi) return;
  3.     $view =& ClassRegistry::getObject('view');
  4.     $view->addScript('<style type="text/css">'.$this->_geshi->get_stylesheet().'</style>');
  5. }
  6.  
Show Plain Text
  1. private function getScript() {
  2.     if(!$this->_geshi) return;
  3.     $view =& ClassRegistry::getObject('view');
  4.     $script = "";          
  5.     $view->addScript($script);
  6. }

assign var $script above with this string, don't forget to add mootools library on your page header.

 

Show Plain Text
  1. <script type="text/javascript">
  2. window.addEvent('domready', function() {
  3.     var codeBlocks = $$('div.code');
  4.         codeBlocks.each(function(block){
  5.             var switchButton = block.getPrevious()
  6.             var blockText = block.get('text');
  7.             var plainTextEl = new Element('pre', {
  8.                 'text' : blockText,
  9.                 'class' : 'plain-text'
  10.             });
  11.             var htmlText = block.get('html');
  12.             block.store('state', 'code');
  13.  
  14.             switchButton.addEvent('click', function(e) {
  15.                 e.stop();
  16.                 var state = block.retrieve('state');
  17.                 var _blockText = plainTextEl;
  18.                 var _htmlText = htmlText;
  19.                 if (state == 'code') {
  20.                     this.set('text', 'Show Highlighted Code');
  21.                     block.store('state', 'text');
  22.                     block.empty().adopt(_blockText);
  23.                 } else {
  24.                     this.set('text', 'Show Plain Text');
  25.                     block.set('html', _htmlText);
  26.                     block.store('state', 'code');
  27.                 }
  28.             });
  29.         }, this);
  30. });
  31. </script>

The last function is to replace all '<br/>' with '\n'

 

Show Plain Text
  1. private function convertBR($str) {
  2.      $out = str_replace("<b r />","\n",$str);  //remove space on br
  3.      return $out;
  4. }

OK, we now ready to add those new functions into the main functions, goto function highlight() and insert this line just before return

Show Plain Text
  1. $this->getScript(); // ------  add this line
  2. return $this->output( $html );

 

Then goto function _processCodeBlock() add these 2 lines

 

Show Plain Text
  1. $code = $this->convertBR($code);   //------------add this line
  2.            
  3. if ((bool)$lang) {
  4.  //get instance or use stored instance
  5.         if ($this->_geshi == null) {
  6.          $geshi = new GeSHI($code, $lang);
  7.          $this->_geshi = $geshi;   
  8.          $this->__configureInstance($this->_geshi);
  9.                                
  10.     } else {
  11.         $this->_geshi->set_source(trim($code));
  12.         $this->_geshi->set_language($lang);
  13.     }
  14. $this->getCSS(); //--------- add this line
  15. $highlighted = $this->_geshi->parse_code();
  16.                
  17.                
  18. return $openTag . $highlighted . $closeTag;    
  19. }

That's all, here is the completed zip file to download, helper file only, please refer to Mark website for the completed instruction to use the helper.

Download file

Add your comment

CAPTCHA
reload code