Codigo Script Code HTML en Blogger Blogspot con SYNTAX HIGHLIGHTER

.

Ejemplo de código script Htmlo en Blogger con SYNTAX HIGHLIGHTER.





Lechill Mobile
<!-- -->



canvas
{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index:-1
}

#container{
height:580px;}






Your browser doesn't support the HTML5 Canvas. Try using Firefox or Google Chrome



var canvas = document.getElementsByTagName('canvas')[0],
ctx = null,
grad = null,
body = document.getElementsByTagName('body')[0],
color = 255;

if (canvas.getContext('2d')) {
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 300, 300);
ctx.save();
// Create radial gradient
grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#fff');
grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');

// assign gradients to fill
ctx.fillStyle = grad;

// draw 600x600 fill
ctx.fillRect(0,0,1000,1000);
ctx.save();

body.onmousemove = function (event) {
var width = window.innerWidth,
height = window.innerHeight,
x = event.clientX,
y = event.clientY,
rx = 1000 * x / width,
ry = 1000 * y / width;

var xc = ~~(256 * x / width);
var yc = ~~(256 * y / height);

grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 1000);
grad.addColorStop(0, '#fff');
grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
ctx.restore();
ctx.fillStyle = grad;
ctx.fillRect(0,0,1000,1000);
ctx.save();
};
}













.

¿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.

.
Anuncios

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 este código:





























SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();


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:








SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();

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.


. Necesita convertir caracteres HTML.


Your 'HTML' code goes here

– 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


.

1.3 Clic en Vista Previa, ahora el código HTML se representa correctamente.

2. . No necesita convertir caracteres HTML.


 <! [CDATA [
Your 'HTML' code goes here
]]>
 

– 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,


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.

.