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