Usar SyntaxHighlighter 3.0.83 en Blogger

Para los que no lo conoscan, SyntaxHighlighter es un plugin creado en javascript que permite añadir códigos de diseño y programación de manera mas sencilla sin necesidad de destacarlos manualmente. Tiene la particularidad de ser fácil de usar y además permite varios lenguajes de programación.

La última versión de este plugin es la 3.0.83 y desde las versiones anteriores el código de uso difiere del actual.



Para comprobar el resultado de SyntaxHighlighter puedes observar los siguientes demos (Tema por defecto):

Ejemplo brush xml:

<div id="demo">
<h1>Soy un título</h1>
</div>

Ejemplo brush css:

.ejemplo-sh [alt="lorem"] {
position:absolute;
width:100px;
overflow:hidden;
}

div.ejemplotag {
position:fixed;
top:0;
left:0;
background:#222;
color:#FFF;
padding:10px;
box-shadow:5px 2px 20px #222;
}

Ejemplo brush js:

<script type='text/javascript'>
$(document).ready( function () {
$(".post-body img").removeAttr("width");
$(".post-body img").removeAttr("height");
});
</script>

En "Diseño | Edición HTML" ("Plantilla | Edición HTML" si usas el nuevo Blogger), deberás buscar el siguiente código:

</head>

Arriba de éste pegar el siguiente:

<link href="http://archivos.ayuda-bloggers.info/index.php?dir=Scripts+Recuperados%2FSyntaxHighlighter%2Fsrc%2F/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/SyntaxHighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/SyntaxHighlighter/src/shCore.js" type="text/javascript" />
<script src="http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/SyntaxHighlighter/scripts/shBrushBash.js" type="text/javascript" />
<script src="http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/SyntaxHighlighter/scripts/shBrushCss.js" type="text/javascript" />
<script src="http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/SyntaxHighlighter/scripts/shBrushJava.js" type="text/javascript" />
<script src="http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/SyntaxHighlighter/scripts/shBrushJScript.js" type="text/javascript" />
<script src="http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/SyntaxHighlighter/scripts/shBrushPerl.js" type="text/javascript" />
<script src="http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/SyntaxHighlighter/scripts/shBrushPhp.js" type="text/javascript" />
<script src="http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/SyntaxHighlighter/scripts/shBrushSql.js" type="text/javascript" />
<script src="http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/SyntaxHighlighter/scripts/shBrushVb.js" type="text/javascript" />
<script src="http://archivos.ayuda-bloggers.info/Scripts%20Recuperados/SyntaxHighlighter/scripts/shBrushXml.js" type="text/javascript" />

<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Suprime los lenguajes que no utilizarás en tu blog y posteriormente guarda los cambios.


Para poder hacer uso de este plugin bastaría con insertar el código entre etiquetas <pre> de la siguiente forma:

<pre class="brush: TIPO">
// Código aquí
</pre>

En donde deberás reemplazar "TIPO" por el nombre del lenguaje que estás destacando.

Para ver la lista de brushes puedes visitar este enlace (Son para SH 2.0 pero funcionan bajo 3.0.83)

Importante:

Para más documentación puedes ir al sitio oficial de SyntaxHighlighter.
Para descargar la última versión, otros estilos u otros lenguajes (brushes), visita la sección Downloads.