Perú

Perú

+51 952051956
Contáctanos por Whatsapp
Menú

Colorear código en tu página web con Prism

Manual Web  -->  HTML  -->  Apuntes CSS
Fecha Publicación:       03 de Mayo de 2019
Fecha Modificación:       04 de Mayo de 2019
Colorear código en tu página web con Prism

Si quieres mostrar ejemplos de código en tu web para documentación o tutoriales, Prism.js es una librería de JavaScript que te permite colorear el código (Code Syntax Highlighters).

Basta con encerrar el código entre las etiquetas  <pre><code></code></pre>.

<pre>, significa texto pre-formateado, se visualiza en una fuente con ancho fijo (Courier) y preserva tanto espacios vacíos como saltos de línea.

<code>, según el W3C lo usaremos para poder escribir fragmentos de código, por defecto se muestran en la fuente monoespacio que use el navegador.

Instalar Prism

Para Instalar hay que ir a la página del proyecto http://prismjs.com y pulsar el botón Download para ir a la página de descargas http://prismjs.com/download.html

  1. Escoger si va a descargar la versión minificada o la versión de desarrollo.
  2. Escoger el tema.
  3. Escoger los lenguajes que queremos que reconozca prism. Entre paréntesis vemos el peso de cada libreria.

 

Una vez terminada de personalizar la descarga, podemos hacer clic en los botones Download JS y Download CSS de la parte inferior de la página y agregarlos a nuestro proyecto. Para que todo funcione sin problemas,  cargar el archivo prism.js y  prism.css  en su codigo html.

<html>
  <head>
    <script src="js/prism.js"></script>
    <link href="css/prism.css" rel="stylesheet" />
  </head>
  <body>   
  </body>
</html>

 

¿Cómo usar prism.js?

Según la web de prism.js este script solo funciona con la etiqueta <code> ya que es la que semánticamente más se ajusta a lo que queremos hacer, aún así para poder escribir el código y que se muestre con los espacios que dejemos tendremos que empezar por la etiqueta pre y después con code, quedaría de esta manera:

 

<pre class="language-xxx">
<code>
     ingresar codigo 
</code>
</pre>

Remplace xxx por el nombre del lenguaje correspondiente. Por ejemplo: language-css, language-javascript , language-ruby, etc. Con eso ya tienes a prism.js funcionando.

Si va a escribir código HTML la clase no debe ser language-html, sino language-markup

Plugins para Prism:

En la página de descarga se pueden escoger los plugins que deseemos:

  • Line Highlight. Que añade los números de línea, para conseguirlo basta añadir la clase line-numbers a la etiqueta pre.
  • Show language. Muestra el lenguaje utlizado en el cuadro de código. No requiere configurar nada.
  • Remove initial line feed. Por algún motivo que no entiendo, prism agrega una línea en blanco al inicio del código. Este plugin la elimina. Tampoco hay que configurar nada.
  • Autolinker. Para convertir URL en enlaces
  • Show Invisibles. Que permite mostrar visualmente aquellos caracteres invisibles en el código como saltos de línea
  • Line Numbers. Agrega números a cada línea. Tienes que indicar con una class de CSS el bloque PRE donde quieres que se vean los números de línea. es importante que esa clase la coloques en el PRE y no en la etiqueta CODE.

    Además puedes usar el atributo data-start asociando un número, para que la cuenta de líneas comience a partir del valor que tú indiques.

    <pre class="line-numbers" data-start="100" class="language-javascript"><code>ingresar codigo</code></pre>

Entidades HTML

Si dentro del código existen los símbolos < y > será necesario remplazar estos por sus entidades html respectivas &lt; y &gt; en caso contrario el navegador interpretará los simbolos e intentará interpretar el código. Tenga esto en cuenta al escribir código html y php principalmente.

Agregar CSS

Nota: Agrega este codigo css en tu archivo css principal para complementar el css de prism.

/*-------- Codigo css para prism.js    https://prismjs.com/index.html -------------*/

/*----  pone borde alrededor de la etiqueta pre -------------*/
pre[class*="language-"] {border: 1px solid #ccc; }

pre {
   word-wrap: break-word;white-space: pre-wrap;}

/*--------Fin Codigo css para prism.js -----------*/

Para que salga letra-marcada  deves  encerrarlo entre las etiquetas <code>letra-marcada</code>  y Agrega este codigo css en tu archivo css principal para complementar el css de prism.

:not(pre) code {
    font-weight: 400; background: #f0f0f0;/* border: 1px solid #dfe2e2; */
    color: #f14937;}
Volver indice Volver Atras