Hacía tiempo que estaba buscando una herramienta para dar formato a los ejemplos de código en los posts. El problema, como siempre, son las palabras. No daba con ellas para la búsqueda.
Bien, hoy casualmente me entero del nombre de este tipo de cosas, Syntax Highlighter
podran obtener mayor información en http://code.google.com/p/syntaxhighlighter/
lo bueno de este proyecto desarollado sobre javascript es poder hacer cosas como estos ejemplos.
si bien es cierto que se necesitamos el codigo javascript y css de syntaxhighlighter para que el blog pueda interpretar las etiquetas que acabamos de mostrar.
los pasos a seguir son los siguientes necesitamos agregar un gadget de tipo html/javascript en nuestro blog y dentro de el pegar el codigo del css y javascript de syntaxhighlighter.
Ahora hay que tener en cuenta que existe un cierto cambio que debemos realizar para publicaciones en el blog veamos el ejemplo de como se publicaria un codigo html.
Bien, hoy casualmente me entero del nombre de este tipo de cosas, Syntax Highlighter
podran obtener mayor información en http://code.google.com/p/syntaxhighlighter/
lo bueno de este proyecto desarollado sobre javascript es poder hacer cosas como estos ejemplos.
public class CSharpFormateado
{
public int _mivariable;
public CSharpFormateado(int mivariable)
{
_mivariable=mivariable; //comentarios OK.
}
public int MiVariable
{
get { return _mivariable;}
}
}
function MiFuncionJS(arg)
{
for(var i=0;i<10;i++)
alert(i + arg);
}
<html>
<body>
<p>
Etiquetas HTML!
</p>
</body>
</html>
si bien es cierto que se necesitamos el codigo javascript y css de syntaxhighlighter para que el blog pueda interpretar las etiquetas que acabamos de mostrar.
los pasos a seguir son los siguientes necesitamos agregar un gadget de tipo html/javascript en nuestro blog y dentro de el pegar el codigo del css y javascript de syntaxhighlighter.
<style>
.dp-highlighter { font-family: "Consolas", "Courier New", Courier, mono, serif; font-size: 12px; background-color: #E7E5DC; width: 99%; overflow: auto; margin: 18px 0 18px 0 !important; padding: 1px 0 0 0 !important; }
.dp-highlighter ol, .dp-highlighter ol li, .dp-highlighter ol li span { margin: 0; padding: 0; border: none; }
.dp-highlighter a, .dp-highlighter a:hover { background: none; border: none; padding: 0; margin: 0; }
.dp-highlighter .bar { padding: 0 0 0 45px; }
.dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar { padding-left: 0px; }
.dp-highlighter ol { list-style: decimal; background-color: #fff; margin: 0px 0px 1px 45px !important; padding: 0px;color: #5C5C5C; }
.dp-highlighter.nogutter ol, .dp-highlighter.nogutter ol li { list-style: none !important; margin-left: 0px !important; }
.dp-highlighter ol li, .dp-highlighter .columns div { background: none; list-style: decimal-leading-zero; list-style-position: outside !important; border-left: 3px solid #6CE26C; background-color: #F8F8F8; color: #5C5C5C; padding: 0 3px 0 10px !important; margin: 0 !important; line-height: 14px; }
.dp-highlighter.nogutter ol li, .dp-highlighter.nogutter .columns div { border: 0; }
.dp-highlighter .columns { background-color: #F8F8F8; color: gray; overflow: hidden; width: 100%; }
.dp-highlighter .columns div { padding-bottom: 5px; }
.dp-highlighter ol li.alt { background-color: #FFF; color: inherit; }
.dp-highlighter ol li span { color: black; background-color: inherit; }
.dp-highlighter.collapsed ol { margin: 0px; }
.dp-highlighter.collapsed ol li { display: none; }
.dp-highlighter.printing { border: none; }
.dp-highlighter.printing .tools { display: none !important; }
.dp-highlighter.printing li { display: list-item !important; }
.dp-highlighter .tools { padding: 3px 8px 3px 10px; font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; background-color: #f8f8f8; padding-bottom: 10px; border-left: 3px solid #6CE26C; }
.dp-highlighter.nogutter .tools { border-left: 0; }
.dp-highlighter.collapsed .tools { border-bottom: 0; }
.dp-highlighter .tools a { font-size: 9px; color: #a0a0a0; background-color: inherit; text-decoration: none; margin-right: 10px; }
.dp-highlighter .tools a:hover { color: red; background-color: inherit; text-decoration: underline; }
.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }
</style>
<script type="text/javascript"><!--
// 1.5.1
var dp={sh:{Toolbar:{},Utils:{},RegexLib:{},Brushes:{},Strings:{AboutDialog:'<html><head><title>About...</title></head><body class="dp-about"><table cellspacing="0"><tr><td class="copy"><p class="title">dp.SyntaxHighlighter</div><div class="para">Version: {V}</p><p><a href="http://www.dreamprojections.com/syntaxhighlighter/?ref=about" target="_blank">http://www.dreamprojections.com/syntaxhighlighter</a></p>©2004-2007 Alex Gorbatchev.</td></tr><tr><td class="footer"><input type="button" class="close" value="OK" onClick="window.close()"/></td></tr></table></body></html>'},ClipboardSwf:null,Version:'1.5.1'}};dp.SyntaxHighlighter=dp.sh;
.
.
todas las lineas del javascript SyntaxHighlighter pueden ver el codigo fuente de este blog para obtener el codigo que necesitan..
.
.
lt;/script>
Ahora hay que tener en cuenta que existe un cierto cambio que debemos realizar para publicaciones en el blog veamos el ejemplo de como se publicaria un codigo html.
<pre name="code" class="html">
<!-- Noten la sustitución de < por < -->
<html>
<body>
<p>
Etiquetas HTML!
</p>
</body>
</html>
</pre>
Comentarios
Publicar un comentario