Ir al contenido principal

Dale estilo a tu código con Prettify

abril 06, 2012 —

Prettify es un modulo de JavaScript que permite resaltar la sintaxis de los códigos en páginas HTML.

  • Es ligero, simple y bonito.
  • Ofrece 4 temas de estilo fáciles de modificar con un poco de CSS.
  • Puedes especificar el lenguaje utilizado.
  • Posibilidad de enumerar las líneas.

Existen muchos otros resaltadores de códigos como este, que también ofrecen estas posibilidades y tal vez más. Pero yo elegí Prettify porque encontré el tema Desert que se parece un poco al "Twiligth" de Sublime Text que es el editor que normalmente utilizo.

La implementación es muy sencilla:
Primero descarga el paquete desde Google Code. Aloja los archivos “prettify.js” y “prettify.css” en un servidor y luego inclúyelos en la plantilla. Así:

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

Sí quieres utilizar otro lenguaje diferente a los predeterminados, debes incluir el archivo correspondiente a ese lennguage, por ejemplo, el CSS:

<script type="text/javascript" src="lang-css.js"></script>

Lo siguiente será agregar onload="prettyPrint()" a la etiqueta body de tu plantilla.

Ahora cada vez que quieras agregarle estilo a los fragmentos de código que compartes bastará con ponerlo entre las etiquetas <pre/> o <code/> agregando la clase prettyprint.

<pre class="prettyprint">
// Saluda al mundo
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}
</pre>

Y se verá algo así:

// Saluda al mundo
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}

Para enumerar las líneas solo basta con agregar la clase linenums a la etiqueta.

<pre class="prettyprint linenums">

Si no quieres que el conteo comience desde 1, puedes agregar dos puntos seguidos del número que desees.

<pre class=”prettyprint linenums:34”>

Quedará de esta manera:

// Esta es la linea 34
// Saluda al mundo
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}

Aquí hay otros que también son buenos y puedes utilizar:

0 comentarios