sábado, 24 de abril de 2010

Mostrar códigos con Syntax Highlighter


Syntax Highlighter.

Ir a Diseño, Edición de HTML y justo arriba de </head>

Poner los siguientes códigos:

El core de Syntax Highlighter:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js'></script>

Para cada lenguaje (Brushes):
Debes de incluir tantos "brushes" como vayas a necesitar.
En este caso Javascript,Css,Xml:
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js'></script>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'></script>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js'></script>
Lista completa de Brushes:


Por último hay que activarlo:
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Guardar plantilla.


En tus entradas hay que colocar tu código dentro de la etiqueta pre junto con la clase que resaltará tu código:

Ejemplo para resaltar Css:
<pre class="brush: css">
Acá el código
Acá el código
Acá el código
Acá el código
Acá el código
Acá el código
</pre>

El atributo class define el lenguaje a resaltar.

Tiene varias opciones en la web del autor entre ellas el color del tema.

SyntaxHighlighter 2,0 introdujo temas CSS personalizada. Esto significa que al cambiar a un solo archivo CSS que puede cambiar completamente la apariencia de la sintaxis resaltada. Un pequeño número de temas de colores conocidos se incluyen con SyntaxHighlighter y usted puede hacer fácilmente su propio tema.

Puede ver y elegir de la lista su tema y cambiar el siguiente código de mas arriba:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

No hay comentarios:

Publicar un comentario