Agregar script visualizador de codigo a blogger. Artículo tomado desde
Hola betas este es mi segundo tutorial, como siempre voy a empezar tratando de explicar de qué va todo. Imaginen que tienen un blog en donde van a compartir código Css o algún otro código y desean que se vea ordenado con las variables de otro color y todo lo demás, más o menos como la siguiente imágen. Para eso existe un script llamado SyntaxHighlighter creado por Alex Gorbatchev y es de licencia libre así que cualquiera puede usarlo. Los lenguajes de programación que soporta entre otros son: css, php, java, etc, pueden ver la lista completa en el siguiente enlace:
¿Cómo se instala? Hay dos formas de hacerlo, una es enlazando los archivos directamente desde la web del autor. Y la segunda forma es descargar los archivos y resubirlos a un servidor o sino subirlo a dropbox y desde ahí enlazarlos a tu web. Enlazando directamente los archivos desde la web del autor.
1. Nos logueamos en blogger (Blogger)
2. En el blog que deseamos poner el script desplegamos y clic en “plantilla”
----------------------------- 3. Clic en editar html. -----------------------------
4. Clic en cualquier parte del código que nos aparece, luego presionamos la combinación de teclas Ctrl+F y en recuadro del buscador que nos aparece escribimos “</head>” sin comillas y damos ENTER para buscar. Justo antes de </head>, vamos a colocar el siguiente código:
Insertar CODE, HTML o PHP:
<!--Themes-->
<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"/>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"/>
<!--lenguajes-->
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"/>
<!--Para Blogger-->
<script language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = "http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf";
SyntaxHighlighter.all();
</script>Ahora sí, la explicación del código:
Themes: ahí pueden configurar el tema con el cual quieren que se visualice su código.La lista completa de temas lo pueden ver en el siguiente enlace:
SyntaxHighlighter - Themes
Lenguajes: Como su nombre lo indica son la parte donde colocamos qué lenguaje de programación deseamos que el script reconozca. Pueden ver la lista completa en el siguiente enlace:
SyntaxHighlighter - Bundled Brushes
El resto de código es para que funcione en blogger.
6. Ahora finalmente para publicar el código nos vamos a blogger>nueva entrada, en la parte de redactar seleccionamos HTML y lo publicamos de la siguiente forma
Insertar CODE, HTML o PHP:
<pre class="brush: css">
/*AQUÍ VA SU CÓDIGO*/
</pre>En donde dice “brush” colocan el lenguaje de programación que están publicando (CSS) en mi caso.
HelloWorld
.bisel {
font-size:.8em;
width: 80%;
margin: 10px auto;
padding: 1em 2.5em;
color: #00008B;
background-color: #BDACEF;
background:
-moz-radial-gradient(0 100%, circle, rgba(228,228,228,0) 2em, #445E75 2.1em),
-moz-radial-gradient(100% 100%, circle, rgba(228,228,228,0) 2em, #445E75 2.1em),
-moz-radial-gradient(100% 0, circle, rgba(228,228,228,0) 2em, #445E75 2.1em),
-moz-radial-gradient(0 0, circle, rgba(228,228,228,0) 2em, #445E75 2.1em);
background:
-webkit-radial-gradient(0 100%, circle, rgba(228,228,228,0) 2em, #BDACEF 2.1em),
-webkit-radial-gradient(100% 100%, circle, rgba(228,228,228,0) 2em, #BDACEF 2.1em),
-webkit-radial-gradient(100% 0, circle, rgba(228,228,228,0) 2em, #BDACEF 2.1em),
-webkit-radial-gradient(0 0, circle, rgba(228,228,228,0) 2em, #BDACEF 2.1em);
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
background-size: 51% 51%;
background-repeat: no-repeat;
}
Demósle un poco de estilo a "var" 'Java' para diferenciarlo
'Java'
Save template
<pre>
'XML'
'</head>'
''
''
