cacope
Gamma
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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 (Enlace eliminado)
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 si, 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.
Eso es todo, si tienen alguna duda comenten en esta publicación.
Todas las imágenes de esta publicación están alojadas en dropbox, si quieres aprender como utilizar las imágenes de dropbox de esta forma te recomiendo ver mi otro tutorial.
Todas las imágenes de esta publicación están alojadas en dropbox, si quieres aprender como utilizar las imágenes de dropbox de esta forma te recomiendo ver mi otro tutorial.
http://forobeta.com/tutoriales/465868-crear-enlaces-de-descarga-directa-googledrive-y-dropbox.html
