Colorear Código con Highlight.js

Muchas veces deseamos compartir códigos con nuestros usuarios y para poder darles una mejor presentación podemos usar highlight.js, esta librería JavaScript es asombrosa.

Descargar librería highlight.js

Para descargar esta librería JavaScript visita la siguiente página.

Highlight.js

En esta página podemos seleccionar los estilos CSS para los lenguajes que deseamos dar una mejor presentación.

Uso

Aquí un pequeño código de uso en un archivo html.

<!DOCTYPE html>  
<html lang="es">  
<head>  
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="description" content="Uso de highlight.js para colorear nuestros códigos.">
  <title>HIGHLIGHT.js</title>
  <!--Este estilo CSS se encuentra en el archivo zip descargado anteriormente; carpeta styles.-->
  <link rel="stylesheet" href="styles/monokai-sublime.css">
  <style>
    html{
      margin:0;
      padding:0;
      overflow:hidden;
    }
    body{
      background: #fff;
      color: #1A1A1A;
      font-size: 16px;
      font-weight: normal;
      margin:0;
      padding:0 10px;
    }
    h1{
      color: #ff6262;
      font-size: 3em;
      font-weight: 700;
      margin-top: 10px;
      line-height:normal;
    }
  </style>
</head>  
<body>  
<h1>Código CSS formateado con highlight.js</h1>  
<!--Nuestro código debe ir dentro de la etiqueta pre + code-->  


{gfm-js-extract-pre-1}

<!--Librería jQuery-->  
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>  
<!--Link de la librería desde su CDN, si usted lo desea puede usar el archivo js descargado-->  
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>  
<!--Código importante para que funcione nuestra librería-->  
<script>  
    $(document).ready(function() {
      $('pre code').each(function(i, block) {
        hljs.highlightBlock(block);
      });
    });
</script>  
</body>  
</html>  

Ver resultado

Demo highlight.js

Ahora todo el código que se encuentre dentro de las etiquetas pre > code, tendrán una mejor presentación.

Luis Rene Mas Mas's Picture

Luis Rene Mas Mas

Hola, soy desarrollador front-end & dasarrollador móvil (Android), me encanta las tecnologías web - móvil, también administro este blog.

Trujillo - Perú @01luisrene

Únete al Blog

Obtén los últimos artículos publicados directamente en tu bandeja de entrada.

O suscríbase vía RSS con Feedly!

Comparte tu Opinión