Integración de Blogger con SyntaxHighlighter

Que es SyntaxHighlighter?

SyntaxHighlighter es un conjunto de librerias Java Script que permiten mostrar código fuente (java, sql, c#, etc.) en una pagina web.

SyntaxHighlighter está basado 100% en Java Script, tiene soporte para múltiples lenguajes de programación y es fácil de usar.

Los lenguajes de programación para los cuales SyntaxHighlighter tiene soporte son:

- Java

- C++

- C#

- CSS

- Sql

- VB

- XML/HTML

- Java Script

- PHP

- Delphi

- Python

- Ruby

Integración con Blogger.

Para integrar Blogger con SyntaxHighlighter, es necesario realizar las siguientes actividades:

• SyntaxHighlighter

1. Visitar la página del proyecto SyntaxHighlighter
2. Ir a Source.
3. En Command-line access copiar la siguiente línea de código y pegarlo al navegador web http://syntaxhighlighter.googlecode.com/svn/trunk/
4. En este sitio se encuentran los script, hojas de estilo y algunos ejemplos del uso de SyntaxHighlighter para los lenguajes de programación que soporta SyntaxHighlighter.
5. En este sitio, ir a Script, dar clic en todos los archivos, copiar la URI de cada uno de ellos y pegarlos en un documento de texto.
6. En este sitio ir a Styles dar clic en la hoja de estilos SyntaxHighlighter.css , copiar todo su contenido y pegarlo en un documento de texto.

• Blogger

1. Ir a Diseño/Edición de HTML, buscar la etiqueta </head> y antes de la misma, pegar el contenido de la hoja de estilos previamente copiado.
2. Referenciar cada una de las URIs Java Script previamente copias; por ejemplo:

   <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>
   

3. Buscar la etiqueta </body> y antes de la misma, pegar el siguiente bloque de codigo:

   <script class="javascript">
   if(window.isBloggerMode == true)
   dp.SyntaxHighlighter.BloggerMode();
   dp.SyntaxHighlighter.ClipboardSwf='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/clipboard.swf';
   dp.SyntaxHighlighter.HighlightAll('code');
   </script>
   

4. Clic en VISTA PREVIA, para asegurarse que la plantilla no contiene errores y luego clic en GUARDAR PLANTILLA.

• Implementación

Para usar SintaxHighLighter, se utiliza las etiquetas <pre> </pre>, como sigue

<pre class="java" name="code">
//Codigo
</pre>

Donde el valor de class, es el alias del lenguaje de programación a utilizarse.

Para ver la lista de los lenguajes de programación que SintaxHighLighter soporta ir a Languages.

Se debe tener en cuenta que el código que se va a publicar debe estar formateado en HTML; para esto es posible utilizar el siguiente link .

Ejemplos
A continuación se muestra algunos ejemplos:

JAVA

package com.juego;
import java.util.ArrayList;
import java.util.List;
import android.app.AlertDialog;
import android.app.ListActivity;
import android.content.DialogInterface;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;

/**
 * Representa la pantalla de inicio de la aplicacion
 *  @author Wladimir López 02/07/2011
 */
public class main extends ListActivity {
 List<String> menuItem;
 Resources res;
 TextView tvSalir;
 TextView tvAyuda;
 TextView tvJugar;
 TextView tvPuntaje;
 Intent myIntent;

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  res = getResources();
  menuItem = new ArrayList<String>();
  menuItem.add(res.getString(R.string.jugar));
  menuItem.add(res.getString(R.string.puntajes));
  menuItem.add(res.getString(R.string.ayuda));
  menuItem.add(res.getString(R.string.salir));

  this.setListAdapter(new ArrayAdapter<String>(this, R.layout.rowlayout,
    R.id.textViewRow, menuItem));

 }

 @Override
 protected void onListItemClick(ListView l, View v, int position, long id) {
  super.onListItemClick(l, v, position, id);
  // Get the item that was clicked
  Object o = this.getListAdapter().getItem(position);
  String keyword = o.toString();
  if (keyword.equals(res.getString(R.string.jugar))) {
   myIntent = new Intent(main.this, Nick.class);
   main.this.startActivity(myIntent);
  }

  if (keyword.equals(res.getString(R.string.salir))) {
   mostrarDialogSalir();
  }

  if (keyword.equals(res.getString(R.string.ayuda))) {
   myIntent = new Intent(main.this, Ayuda.class);
   main.this.startActivity(myIntent);
  }

  if (keyword.equals(res.getString(R.string.puntajes))) {
   myIntent = new Intent(main.this, Puntaje.class);
   main.this.startActivity(myIntent);
  }
 }

 public boolean onKeyDown(int keyCode, KeyEvent event) {
  if (keyCode == KeyEvent.KEYCODE_BACK) {
   // TECLA ATRAS PULSADA
   mostrarDialogSalir();
  }

  return false;
 }

 /**
  * @author Wladimir López 
  * Este método permite mostrar un dialogo que permite
  * al usuario escoger entre salir del juego o regresar
  */
 protected void mostrarDialogSalir() {
  // Mostrar un mensaje de confirmación antes de cerrar la aplicacion
  AlertDialog.Builder alertDialog = new AlertDialog.Builder(main.this);
  alertDialog.setMessage("¿QUIT GAME?");
  alertDialog.setTitle("GOOD BYE");
  alertDialog.setCancelable(true);
  alertDialog.setPositiveButton("Yes",
    new DialogInterface.OnClickListener() {
     public void onClick(DialogInterface dialog, int which) {
      main.this.finish();
     }
    });
  alertDialog.setNegativeButton("No",
    new DialogInterface.OnClickListener() {
     @Override
     public void onClick(DialogInterface dialog, int which) {
      dialog.cancel();
     }
    });
  alertDialog.show();
 }
}

SQL

select *
from alumno
where idAlu=1233;

CSS

body
{
   color:red;
   text-align:center;
}

Fuentes
http://code.google.com/p/syntaxhighlighter/source/checkout

http://urenjoy.blogspot.com/2008/10/publish-source-code-in-blogger.html