Prism Impresionante Script para Resaltar tu Sintaxis

A decir verdad existen muchos resaltadores de Sintaxis como Google Prettify, Syntax Hightlighter y muchos otro más. Actualmente este blog implementa una versión de Syntax Hightlighter para WordPress, pero en el nuevo diseño del sitio estoy implementando Google Prettify el cual me resulta mas cómodo de utilizar, puedo personalizarlo a mi manera y es bien flexible.

Pero hablemos de otro resaltador de Sintaxis popular como Prism traído a nosotros por Lea Verou, este cumple con todos los estanders web modernos y se usa actualmente en Dabblet que es un editor de código Front-End online.

Limitaciones

  • No hay soporte para IE 6-8, pienso que el 85% de las personas que navegan y quieren leer código lo hacen desde un navegador moderno.
  • Solo tiene soporte para los lenguajes CSS, HTML/XHTML/HTML5, JavaScript y Java

Uso Básico de Prism

Tienes que incluir los archivos prism.css y prism.js.

<!DOCTYPE html>
<html>
<head>

<link href="prism.css" rel="stylesheet" />
</head>
<body>

<script src="prism.js"></script>
</body>
</html>

Prism hace lo posible para fomentar las buenas prácticas. Por lo tanto, sólo funciona con elementos &lt;code&gt;, ya que el marco de código sin un elemento <code> es semánticamente inválido. De acuerdo con la especificación de HTML5, el método recomendado para definir un código para un lenguaje es usando una clase language-xxxx, que es el que Prism usa. Para hacer las cosas más fáciles sin embargo, Prism supone que esta definición de lenguaje es hereditaria. Por lo tanto, si los elementos múltiples <code> tienen el mismo lenguaje, puede agregar la clase language-xxxx en uno de sus antepasados ​​comunes.

De esta manera, también se puede definir un lenguaje por defecto a nivel de documento, agregando una clase language-xxxx en el elemento <body> o <html>.

El marco recomendado para los bloques de código tanto para la parte semántica como para Prism es usar las etiquetas <pre> y la etiqueta <code> dentro, por e.j.:

<pre><code class="language-css">p { color: red; }

Plugins

Los plugins son secuencias de comandos adicionales (y código CSS) que amplían la funcionalidad de Prism. Muchos de los plugins siguientes son oficiales, pero son liberados como plugins para mantener el núcleo del Prism pequeño para aquellos que no necesitan esa funcionalidad extra.

Descarga el proyecto desde GitHub, la pagina Oficial y mira los ejemplos.

Recomendado