Mostrar codigo fuente en blogger

   Esto es muy sencillo si tenemos las herramientas adecuadas, existen varias, pero la que mas me ha gustado es la siguiente: "Google Syntax Highlighter", y la sencilla razón es que soporta C++, C#, CSS , Delphi , Java , Java Script , PHP, Python, Ruby, Sql, VB, XML/HTML y es totalmente configurable.

   Vamos a lo que nos interesa, primero colocamos antes de </head> los siguientes Scripts:


<link href='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shCore.js'/>

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

   Y luego cargamos los lenguajes a mostrar cargandolos despues del "shCore.js", como otro script mas:


<script language='javascript' src='http://{URL}/shBrushPython.js'/>

   Para comenzar a utilizarlos utilizamos las etiquetas 


<pre name="code" class="CODIGO_A_MOSTRAR">
....
</pre>

   Y eso es todo, con eso tendremos una buena vista al momento de publicar código fuente en nuestro site... Puedes entrar al wiki del código para ver información mas detalla de como usarlo.

Lista de Lenguajes Soportados

6 Comentarios

Escribir Comentario
Anónimo
AUTOR
11 de octubre de 2010, 19:50 delete

O sea lo que tengo que copiar en mi blog es esto:






dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');

Responder
avatar
Anónimo
AUTOR
11 de octubre de 2010, 19:51 delete

@Anónimo

No se ve bien lo que puse!!

Responder
avatar
12 de octubre de 2010, 9:50 delete

Ok, el HighLighter lo que hace es resaltar las lineas de código que tenemos en nuestra entrada o post. Por ejemplo, para soporte en mi blog utilizo varios lenguajes y lo tengo antes de /body para hacer la carga mas rápida, por ejemplo para javascript y css:

<link href='http://mi_servidor/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://mi_servidor/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://mi_servidor/shCore.js' type='text/javascript'/>
<script src='http://mi_servidor/shBrushCss.js' type='text/javascript'/>
<script src='http://mi_servidor/shBrushJava.js' type='text/javascript'/>

Si tienes dudas dime en que parte lo estas colocando y como... saludos

Responder
avatar
12 de octubre de 2010, 9:54 delete

Este post es de la versión 2.0.1, aunque puedes entrar a la wiki para encontrar la nueva que es la 3.0.83

Responder
avatar
Darwin
AUTOR
10 de marzo de 2011, 18:19 delete

Hola Carlitox.

Una pregunta: con esto puedo mostrar el código tal y como lo haces en esta entrada al inicio, es decir con sus números de líneas y el código resaltado??
He seguido todos los pasos que indicas pero no consigo que me muestre por ejemplo la línea de código y el resaltado. Por ejemplo he querido mostrar una sentencia de SQL y he puesto esto:

SELECT * FROM tabla

Pero no veo el resaltado como tal. Qué me falta para conseguirlo?

Gracias

Responder
avatar
10 de marzo de 2011, 20:52 delete

Claro, con esto resaltas cualquier línea de código, pero verifica que lo siguiente este en algún lugar de tu plantilla, preferiblemente antes de /body,,,

<link href='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shCore.js'/>
//AQUI LOS CODIGOS QUE QUIERES MOSTRAR
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Para una lista de lenguajes soportados visita el enlace de la entrada, de cualquier forma acabo de entrar a tu blog y veo que va todo bien, saludos!

Responder
avatar

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión EmoticonEmoticon