JoniJnm.es

English Version

Colorear códigos con Jumi en Joomla v1.2

• Descargar plugin
• Necesitas Jumi para usar este plugin sin el 'modo directo'
• Los idiomas soportados están en {Joomla}/libraries/geshi/geshi/
• Puedes añadir más idiomas desde aquí
• Si usas 'modo directo' y Joomla elimina el código al guardar el artículo, necesitas ir a Joomla admin > plugins > Editor - TinyMCE 2.0 > Limpiar código al guardar > Nunca
  
• Desde la versión 1.2 se ha añadido un plugin (extensión para el editor TinyMCE, así que verás un botón en la parte inferior de la creacción del artículo) para insertar el código fácilmente
• Ejemplo id: { code lang:php id:9}{ /code} (Esto colorea el item 9 de Jumi con idioma php)
• Ejemplo alias: { code lang:css alias:style_css}{ /code} (Esto colorea el alias "style_css" de Jumi con idioma css)
• Ejemplo directo: { code lang:javascript}document.getElementById('test').display = 'none';{ /code} (Esto colorea el código entre medias)
• Más atributos:
  • title:"Mi título"
  • showtitle:false o showtitle:true (mostrar título?)
  • hidden:false o hidden:true (codigo escondido?)
  • lines:true o lines:false (mostrar lineas?)
  • line:número (las líneas empiezan en...)

Ejemplos:

HTML (modo directo)

{ 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 primer código" hidden:false}{ /code}
Mi primer 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}

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
}