Google Prettify y jQuery

Google Code prettify es un módulo que hace uso de Javascript y CSS para resaltar la sintaxis de código fuente en una página HTML. Es muy utilizado en blogs y sitios dedicados a desarrolladores, como este por ejemplo.

Para utilizar Prettify en wordpress es algo muy simple, vamos a explicarlo paso por paso.

Primero descargamos Google Prettify desde la url Prettify. En la carpeta src copiamos los archivos prettify.css y prettify.js a a nuestro tema, por ejemplo /wp-content/themes/tu-tema/prettify/.

Enlazando Prettify

Ahora solo debemos enlazar los archivos desde el header.php

<link href="<?php bloginfo("stylesheet_url"); ?>/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="<?php bloginfo("stylesheet_url"); ?>/prettify/prettify.js"></script>

Preferiblemente después de la función wp_head();, porque usaremos la librería jQuery que casi siempre se carga en el header.

para hacerlo de la forma correcta que nos recomienda wordpress, usando el archivos functions.php de nuestro tema.

//definir TEMPPATH para conseguir la ruta del tema
define( 'TEMPPATH', get_bloginfo('stylesheet_directory'));

// script
wp_register_script( 'prettify_script', TEMPPATH . '/js/prettify/prettify.js');
wp_enqueue_script( 'prettify_script' );

wp_register_style( 'prettify_style', TEMPPATH . '/js/prettify/prettify.css', 'screen' );
wp_enqueue_style( 'prettify_style' );

El Problema de usar Prettify

Desde el proyecto de Google Prettify podemos ver unos ejemplos de como usarlo una ves que hemos enlazado el archivo .css y .js. Pero resulta un poco inconveniente, cada ves que queramos mostrar el código fuente para algunos ejemplos de programación tendremos que especificar la clase prettiprint a cada etiqueta &lt;pre&gt;, lo que resulta muy incomodo y nos hace perder mucho tiempo, por ejemplo:

<pre class="prettyprint"> // aquí nuestro código </pre>

Por esta razón recurrimos al el uso de jQuery. Para agregar la clase prettiprint de forma automática al código. Lo cual lo podemos hacer en una sola linea de código.

$('pre').addClass('prettyprint');

¿Cómo Funciona?

Cada ves que usemos la etiqueta code><pre> en la pagina, jQuery actuará y agregará la clase prettiprint de forma automática haciendo todo el trabajo por nosotros.

Usando Temas en Prettify

Google Prettify contiente ya un archivo prettify.css, el cual es que nos da los colores del código fuente a mostrar, puedes encontrar algunos temas en . Puedes usar un tema de la galeria simplemente copiando el codigo CSS y sustituyendo todo el codigo de nuestro archivo prettify.css o simplemente puedes personalizarlo a tu manera como este:

.prettyprint {
  color: #839496;
  background-color: #002b36;
}

.prettyprint .pln {
  color: inherit;
}

.prettyprint .str,
.prettyprint .lit,
.prettyprint .atv {
  color: #2aa198;
}

.prettyprint .kwd {
  color: #268bd2;
}

.prettyprint .com,
.prettyprint .dec {
  color: #586e75;
  font-style: italic;
}

.prettyprint .typ {
  color: #b58900;
}

.prettyprint .pun {
  color: inherit;
}

.prettyprint .opn {
  color: inherit;
}

.prettyprint .clo {
  color: inherit;
}

.prettyprint .tag {
  color: #268bd2;
  font-weight: bold;
}

.prettyprint .atn {
  color: inherit;
}

Puede encontrar referencias en Solarized Google Prettify.

Más Referencias

Recomendado