JoniJnm.es

En español

Highlight code with Jumi on Joomla v1.0

• You need Jumi to use this plugin without 'direct mode'
• 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
• The languages supported are in {Joomla}/libraries/geshi/geshi/
• You can add more languages from here
• Download plugin
• 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:

HTML (direct mode)

{ code lang:html4strict}<p style="color:red; size:large"><a href="http://www.jonijnm.es" target="_blank">Visita JoniJnm.es</a></p>{ /code}
Mostrar/Ocultar código html

<p style="color:red; size:large"><a  href="http://www.jonijnm.es" target="_blank">Visita  JoniJnm.es</a></p>

PHP

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

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}

function mostrar_ocultar(id) {
	if (document.getElementById('highlight-'+id).style.display=='block') {
		document.getElementById('highlight-'+id).style.display='none';
	}
	else {
		document.getElementById('highlight-'+id).style.display='block';
	}
}
 

Css

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

div.highlight {
	font-family: monospace;
	border-left: 5px solid #F4A94F;
	border-right: 1px solid #CCC;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	margin: 5px 0pt 15px;
	padding: 10px 15px;
	overflow: auto;
	width: 93%
}
 
a.highlight_mostrar {
	font-weight: bold;
	color: red
}