domingo, 20 de mayo de 2012

Script code codigo PHP, Html, ActionScript3, Bash, Shell, ColdFusion, C# CSharp, Ansi C, C++, Cpp, CSS, Delphi, Pascal, Dif, Diff, Patch, Erl, Erlang, Groovy, Javascript, Java, JavaFX, Perl, Texto Plano, Powershell, Python, Ruby, Scala, SQL, Visual Basic, xml, xhtml, xslt, xhtml en Blogger o Blogspot con SyntaxHighlighter

.

Script code codigo PHP, Html, ActionScript3, Bash, Shell, ColdFusion, C# CSharp, Ansi C, C++, Cpp, CSS, Delphi, Pascal, Dif, Diff, Patch, Erl, Erlang, Groovy, Javascript, Java, JavaFX, Perl, Texto Plano, Powershell, Python, Ruby, Scala, SQL, Visual Basic, xml, xhtml, xslt, xhtml en Blogger o Blogspot con SyntaxHighlighter.


SyntaxHighlighter es un completo y funcional "resaltador de sintaxis del código" desarrollado en JavaScript, por Alex Gorbachov.


     Informacion sobre coloreado o resaltado de sintaxis   
  
 




 "SyntaxHighlighter is an open source Java Script client side code syntax highlighter".


           Web del Proyecto       
  
        http://alexgorbatchev.com/       


SyntaxHighlighter utiliza distintas sintaxis para distintos lenguajes, en archivos separados llamados Brushses.


     Brushses soportados     
  
   http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/       

Lista de Brushses soportados, y conocidos, en internet.     
 
 http://www.undermyhat.org/blog/2009/09/list-of-brushes-syntaxhighligher

- Nota: -   En estos enlaces se incluyen los alias (class="brush: alias") a utiliar y también aparecen los Lenguajes de Programación soportados por SyntaxHighlighter.



>> - Pasos para añadir SyntaxHighlighter a Blogger - <<

1. Hacer una copia de seguridad del Blog, para recuperar los datos en el caso en el que algo salga mal.
2. Ir a Escritorio > Plantilla > Edición de HTML,  Clic en:  Expandir plantillas de artilugios.
3. Pegar en la parte superior de </head> este código:

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->


Nota:
No hace falta todo el código. Se puede dejar solo los Brushes de los lenguajes que se utilicen. Por ejemplo, si sólo se utiliza SQL:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<!-- add brushes here -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<!-- add brusehs here ENDs-->
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>


5. Vista previa de la plantilla y si todo funciona bien, a continuación, guardar.

- Etiquetas que se pueden usar -

Script añadido al blog.
Para resaltar correctamente el código del lenguaje, existen dos posibles etiquetas.

1. <pre></pre>. Necesita convertir caracteres HTML.

<pre class="brush:html">
Your 'HTML' code goes here
</pre>

- Pasos:

1.1. Copiar el código en alguna Web de la lista:

- .   http://accessify.com/tools-and-wizards/developer-tools/quick-escape/  .-
- .  http://www.string-functions.com/htmlencode.aspx    .-


1.2. Convertir los caracteres especiales y copiar el resultado entre las etiquetas <pre></pre>.
1.3 Clic en Vista Previa, ahora el código HTML se representa correctamente.


2. <script></script>. No necesita convertir caracteres HTML.

<script class="brush:html" type="syntaxhighlighter">
 <! [CDATA [ 
  Your 'HTML' code goes here 
  ]]>
 </script>


- Nota: - Esta etiqueta puede provocar errores.


Más información en la web del autor.


http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html                 



- Temas para SyntaxHighlighter. -


SyntaxHighlighter dispone de temas personalizados CSS. Esto significa que al cambiar un solo archivo CSS, puede cambiar completamente el color de la sintaxis resaltada. Existe un pequeño número de temas con distintos colores, simplemente hay que clic en el tema de CSS para compararlos.

En el código,

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

se cambia el nombre del archivo: 'shThemeDefault.css', para comparar las combinaciones de colores.


 Temas de CSS disponibles  
  
 



- Artículos relacionados: -



- . Scripts en Blogger / Blogspot . -
- .Mostrar scripts en páginas HTML, y blogspot. -



.
¿Te fijaste que al principio del artículo hay una cosa que pone DISCLAIMER?. Pues si se te queman las tostadas por intentar poner en practica lo que dice este articulo o se te raya un CD de El Fary por leerlo no es culpa nuestra. Avisado quedas.
.

0 comentarios: