Colorear códigos con Jumi en Joomla

FaceBook  Twitter  

English Version

Colorear códigos con Jumi en Joomla

  • Descargar plugin
  • Necesitas Jumi para usar este plugin sin el 'modo directo'
  • Los idiomas soportados están en:
    • /plugins/content/highlight_code/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:

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

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