Utilizar highlight.js para resaltar código

min highlight

Muchos me preguntaban sobre el highlighter que uso en zkreations y en esta ocasión les comparto precisamente eso. Un resaltador de código el cual yo considero el mejor si tienes una pagina orientada a programación.


Highlight.js

Primero que todo, el resaltador que uso es highlight.js. Highlight.js es un resaltador de código muy completo, es ligero y esta escrito en Vanilla JS, soporta una amplia lista de lenguajes y estilos. También detecta el lenguaje que se esta usando y le proporciona sus respectivos colores.


Instalacion

En la pagina oficial se explica perfectamente la instalación de highlight, y como usar sus temas oficiales. Sin embargo yo lo tengo diferente, y ademas los estilos son una versión modificada de Gist. Así que si prefieres tener este resaltador como en zkreations, sigue los siguientes pasos:


El siguiente código se incluye arriba de </body>, si estas usando blogger necesitaras entrar a la edicion html:


<script src="//cdn.jsdelivr.net/highlight.js/9.11.0/highlight.min.js"></script>
<script>//<![CDATA[
for(var aCodes=document.getElementsByTagName("pre"),i=0;i<aCodes.length;i++)hljs.highlightBlock(aCodes[i]);
//]]></script>

Por ultimo solo hace falta agregar los estilos, he preparado uno en exclusivo para este aporte. Antes de elegir te recomiendo ver la demostración para que elijas el que mas te guste.


Demostración

Skin #1 - Gist zkreations (Estilos claros)


/* => highlight Gist zkreations*/
.hljs, pre {background-color:#f7f7f7;padding:1.2rem;overflow:auto;line-height:1.45;border-radius:2px;display:block;color:#333;overflow-x:auto;font-size:1rem;margin:0}.hljs-comment,.hljs-meta{color:#969896}.hljs-emphasis,.hljs-quote,.hljs-string,.hljs-strong,.hljs-template-variable,.hljs-variable{color:#df5000}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#a71d5d}.hljs-attribute,.hljs-bullet,.hljs-literal,.hljs-symbol{color:#0086b3}.hljs-name,.hljs-section{color:#63a35c}.hljs-tag{color:#333}.hljs-attr,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-title{color:#795da3}.hljs-addition{color:#55a532;background-color:#eaffea}.hljs-deletion{color:#bd2c00;background-color:#ffecec}.hljs-link{text-decoration:underline}

Skin #2 - Paradise (Estilos oscuros)


/* => highlight paradise */
.hljs, pre {padding:1.2rem;overflow:auto;line-height:1.45;border-radius:2px;display:block;overflow-x:auto;font-size:1rem;margin:0;background:#2B303E;color:rgba(255,255,255,.8)}.hljs-comment,.hljs-meta,.hljs-quote{color:rgba(255,255,255,.4)}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#d4737b}.hljs-built_in,.hljs-builtin-name,.hljs-link,.hljs-literal,.hljs-number,.hljs-params,.hljs-type{color:#7b8dd2}.hljs-attribute{color:#f1cd9a}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#9abf6f}.hljs-section,.hljs-title{color:#90b7cav}.hljs-keyword,.hljs-selector-tag{color:#c592ce}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

Uso básico

Es necesario que el código que vas a resaltar sea texto plano, sobre todo si contiene html ya que el navegador lo puede interpretar como tal, así que antes de usarlo, te recomiendo pasar tu código a texto mediante la herramienta online HTML a Texto que proporciona oloBloggger, he probado muchas y me parece la mejor opción. Ahora tienes que encerrar el código entre etiquetas <pre></pre>. Finalmente quedaría algo así:


<pre>&lt;!DOCTYPE html&gt;
&lt;title&gt;Title&lt;/title&gt;

&lt;style&gt;body {width: 500px;}&lt;/style&gt;

&lt;script type="application/javascript"&gt;
  function $init() {return true;}
&lt;/script&gt;

&lt;body&gt;
  &lt;p checked class="title" id='title'&gt;Title&lt;/p&gt;
  &lt;!-- El resto de la pagina --&gt;
&lt;/body&gt;</pre>

Y al pegarlo en el html se veria asi:


<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
  function $init() {return true;}
</script>

<body>
  <p checked class="title" id='title'>Title</p>
  <!-- El resto de la pagina -->
</body>

Si de todas formas prefieren usar los estilos y la instalación normal, pueden consultar la pagina oficial, esta bien explicado y no creo que tengan problemas. Cualquier duda o inconvenientes que tengan, dejenlo en los comentarios, respondo a todos.