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.
Recibe notificaciones por correo
6 Comentarios
Escribir ComentarioO sea lo que tengo que copiar en mi blog es esto:
Responderdp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
@Anónimo
ResponderNo se ve bien lo que puse!!
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:
Responder<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
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
ResponderHola Carlitox.
ResponderUna 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
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,,,
Responder<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!
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