Highlight code with Jumi on Joomla

FaceBook  Twitter  
View Comments

En español

Highlight code with Jumi on Joomla

  • Download plugin
  • You need Jumi to use this plugin without 'direct mode'
  • The languages supported are in:
    • {Joomla15}/libraries/geshi/geshi/
    • {Joomla16}/plugins/content/geshi/geshi/geshi/
  • You can add more languages from here
  • If you use 'direct mode' and the code is deleted when you save the article, you have to go to joomla admin > plugin > Editor - TinyMCE 2.0 > Code cleanup on save > never
  • There is a plugin (extenions for TinyMCE, you will see a button when you are editing an article) for add the code easily
  • Example id: { code lang:php id:9}{ /code} (It highlights Jumi's item 9 with php lang)
  • Example alias: { code lang:css alias:style_css}{ /code} (It highlights Jumi's alias "style_css" with css lang)
  • Example, directly: { code lang:javascript}document.getElementById('test').display = 'none';{ /code} (It highlights the code between { code} and { /code})
  • More atributes:
    • title:"Mi title"
    • showtitle:false or showtitle:hidden (show title?)
    • hidden:false or hidden:true (code hidden?)
    • lines:true or lines:false (show lines?)
    • line:number (the lines begin at...)

Examples:

JavaScript (direct mode)

{ code lang:javascript}document.getElementById('test').display = 'none';{ /code}
Mostrar/Ocultar código javascript

 

 

PHP

{ code lang:php alias:demo-php title:"Mi first code" hidden:false}{ /code}
Mi first code

Ver código
class plgContenthighlight extends JPlugin {
	function onPrepareContent(&$article, &$params, $limitstart) {
		JPlugin::loadLanguage('plg_content_highlight', JPATH_ADMINISTRATOR);
		jimport('geshi.geshi');
		require_once (dirname(__FILE__). DS . 'highlight' . DS . 'helper.php');
		$regex = "/{code ([\w-_]+) ?([\w]*)}/";
		highlightHelper::add_tags();
		$article->text = preg_replace_callback($regex, 'replacer', $article->text);
	}
}

 

JavaScript

{ code lang:javascript alias:demo-js showtitle:false lines:true}{ /code}

Ver código
  1. function mostrar_ocultar(id) {
  2. 	if (document.getElementById('highlight-'+id).style.display=='block') {
  3. 		document.getElementById('highlight-'+id).style.display='none';
  4. 	}
  5. 	else {
  6. 		document.getElementById('highlight-'+id).style.display='block';
  7. 	}
  8. }
  9.  

 

Css

{ code lang:css alias:demo-css lines:true line:5}{ /code}
Mostrar/Ocultar código css

Información Adicional