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

See the Pen highlight.js by Luis Rene Mas Mas (@01luisrene) on CodePen.

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

Compártelo en tus redes sociales, para que tus amigos lo lean :)

Luis Rene Mas Mas's Picture

Luis Rene Mas Mas

Desarrollador front-end & webmaster del blog 01luisrene.com

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