Usar SyntaxHighlighter 3.0.83 en Blogger

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>


El tutorial:


Paso 1: Añadiendo el script en la plantilla:


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.

Paso 2: Método de uso:

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.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger