Páginas

Poner código y se vea elegante en Blogger

Publicado por
Hay diferentes páginas que nos proveen de esta herramientas y lo mejor de todo es que son gratuitas y las traen alojadas para que las usemos, en este caso usaremos SyntaxHighlighter.

SyntaxHighlighter nos permite poner nuestro codigo de una manera más decente y amigable con el usuario, nosotros podemos hacer el codigo para editar la fuente de los codigo pero en este caso usaremos el ya mencionado, este escrit abarca html, javascript, css, php y muchos otros lenguajes.


1.primero debemos ir a editar el HTML de la plantilla (Entrada anterior) y buscamos </head>
2.Antes de esta etiqueta pondremos los siguiente:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &quot;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&quot;;
SyntaxHighlighter.all();
</script>
Si queremos poner diferentes temas cambiamos esto del código anterior:
shThemeRDark.css

por
shThemeDefault.css
shThemeDjango.css
shThemeEclipse.css
shThemeEmacs.css
shThemeFadeToGrey.css
shThemeMidnight.css
shThemeRDark.css

Para implementar solo es hacer una nueva entrada y poner en la parte de HTML:
<pre class="brush: html">
Aquí va tu código!
</pre>
El tema por default es shThemeDefault.css como este:

¡Comenta si funcionó o si tienes otras opciones!
Tags: