|
Wiki -
Demo
|
|
Escrito por Jónatan Núñez
|
|
Sábado, 14 de Febrero de 2009 00:01 |
|
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 }
|
|
Última actualización en Viernes, 22 de Enero de 2010 12:24 |