Markitup and highlighter plugins for croogo

Posted by Jacob Moen on Thu, Mar 25 2010 09:16:00

I implemented two plugins for Croogo: a Markitup plugin and a syntax highlighting plugin.

They are not finished yet, but in a usable state already - I use both of them to write this post. smile

The highlighter plugin is very simple indeed, only a helper:

class HighlighterHookHelper extends AppHelper {
/**
 * Other helpers used by this helper
 *
 * @var array
 * @access public
 */
    var $helpers = array(
        'Html',
        'Js',
    );
/**
 * Before render callback. Called before the view file is rendered.
 *
 * @return void
 */
    function beforeRender() {
		echo $this->Html->css('/highlighter/css/shCore');
		echo $this->Html->css('/highlighter/css/shThemeRDark');
		echo $this->Html->script('/highlighter/js/shCore.js');
		echo $this->Html->script('/highlighter/js/shBrushBash.js');
		echo $this->Html->script('/highlighter/js/shBrushCSharp.js');
		echo $this->Html->script('/highlighter/js/shBrushCpp.js');
		echo $this->Html->script('/highlighter/js/shBrushCss.js');
		echo $this->Html->script('/highlighter/js/shBrushDelphi.js');
		echo $this->Html->script('/highlighter/js/shBrushDiff.js');
		echo $this->Html->script('/highlighter/js/shBrushJScript.js');
		echo $this->Html->script('/highlighter/js/shBrushPerl.js');
		echo $this->Html->script('/highlighter/js/shBrushPhp.js');
		echo $this->Html->script('/highlighter/js/shBrushPlain.js');
		echo $this->Html->script('/highlighter/js/shBrushPowerShell.js');
		echo $this->Html->script('/highlighter/js/shBrushPython.js');
		echo $this->Html->script('/highlighter/js/shBrushRuby.js');
		echo $this->Html->script('/highlighter/js/shBrushScala.js');
		echo $this->Html->script('/highlighter/js/shBrushSql.js');
		echo $this->Html->script('/highlighter/js/shBrushVb.js');
		echo $this->Html->script('/highlighter/js/shBrushXml.js');
      echo $this->Html->scriptBlock("
	SyntaxHighlighter.config.clipboardSwf = '/highlighter/js/clipboard.swf';
	SyntaxHighlighter.config.stripBrs = true;
	SyntaxHighlighter.defaults['wrap-lines'] = true;
	SyntaxHighlighter.all();
");
    }
}

I use a Code button and a Encode HTML characters button in the Markitup editor, and it works great.laughing

I like that the editor doesn't mess around with the code / markup behind my back.

Markitup is a jQuery powered markup editor, which is very configurable and low impact - highly recommended.

It looks like this in action:

croogo_markitup


You can download both plugins here:

croogo_highlighter_0_1.zip

croogo_markitup_0_1.zip

Though I hope that it will become included in Croogo, at least the Markitup plugin wink

I am totally new to jQuery, and haven't implemented the file upload hook for the Markitup plugin yet.

If anyone implements that, I'll be happy to update the download.

And the highlighter plugin could do with a proper options 'screen', instead of requiring you to hack the helper script to use a different theme.

And the editor does currently only spit out a 'php' code tag..

So, obviously: To be continued. smile

14 Comments

Andrew said on Mar 26, 2010
Hey great work. I have a few plugins planned to release shortly.

Great to have more support in the Croogo community!
jacmoe said on Mar 26, 2010
Thanks for the comment! :)
I'll keep an eye out for your plugins as well.
Croogo is still young, but deserves to be used already.
Jacob Moen said on Apr 04, 2010
Testing a comment - to see if Fahad fixed this. :)
Jacob Moen said on Apr 05, 2010
Another comments test
Jacob Moen said on Apr 05, 2010
And yet another one..
Ishi said on Apr 13, 2010
To make these work with Croogo 1.3 I needed to create a "plugin.yml" file in the webroot directory. Example below.

------------------------------------------
name: PluginName
description: Integrates PluginName into Croogo

author: NA
authorEmail: NA
authorUrl: NA
---------------------------------
Jacob Moen said on Apr 14, 2010
I know - I'll create a Github repository, even though I've got a Google code project for it, to make it easier for you to contribute and/or get the latest version. :)
Jacob Moen said on Apr 14, 2010
Just a small test to see if I fixed the failure after posting a comment issue. :)
Jacob Moen said on Apr 14, 2010
Sorry for spamming my own blog! :P
Jacob Moen said on Apr 14, 2010
It works now - thank God! :D
Fahad said on Apr 14, 2010
also thank Heiner Gassen http://github.com/kitten for finding the error ;)
Jacob Moen said on Apr 14, 2010
Since I fixed the view component issue in my plugins, I guess I need to upload them to Google Code and GitHub - stay tuned..
Jacob Moen said on Apr 15, 2010
Thanks to Heiner Gassen for helping to fix this issue. :)

I'll probably create a repo at GitHub later today - and make a new post when it's ready.
Jacob Moen said on Apr 15, 2010
I made an announcement: the plugins are hosted at Github now. :)

Add new comment