Resaltador de sintaxis Prettify de Google para Google Blogger

¿Está interesado en agregar código con formato enriquecido a su sitio web o blog?

¿Está interesado en agregar código con formato enriquecido a su sitio web o blog? Un desafío al que se enfrenta a menudo es presentar un código de muestra en un formato consumible. Existen varias bibliotecas JavaScript de resaltado de sintaxis de código abierto diferentes. Sin embargo, a los efectos de este artículo, seré Google Prettify. Una biblioteca que puede reconocer la sintaxis sin tener que especificar el lenguaje de programación.

Fuente : https://github.com/google/code-prettify

Paso 1: Instalación de Google Prettify

Primero, comenzamos registrando la biblioteca Javascript en la plantilla.

1. Seleccione Tema en el panel de administración.
2. En la vista previa de su blog, seleccione el botón Editar HTML.

3. Agregue uno de los siguientes scripts justo encima de la etiqueta de cierre </body> de tu página.

<script src = "https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" />

ó

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js" />

4. Seleccione Guardar para confirmar sus cambios.

Paso 2: Uso de Google Prettify

Dentro de la página o publicación de su sitio, simplemente envuelva su código con la etiqueta <pre> y asigne la clase "prettyprint".

<pre class = "prettyprint">
	tu código aqui
</pre> 

Los siguientes lenguajes de código son compatibles con el resaltado de sintaxis según sus extensiones de archivo asociadas.

• bsh 
• c 
• cc 
• cpp 
• cs 
• csh 
• cyc 
• cv 
• htm 
• html 
• java 
• js 
• m 
• mxml 
• perl 
• pl 
• pm 
• py 
• rb 
• sh 
• xhtml 
• xml 
• xsl
  

Uso con especificación de lenguaje:

<pre class = "prettyprint lang-js">
	tu código JS aqui
</pre> 

Uso de numeración:

<pre class = "prettyprint lang-js linenums">
	tu código JS aqui y numeradas las filas
</pre> 

Código de ejemplo:

<script type="text/javascript">
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
  for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
  }
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>

Paso 3: Personalización de Google Prettify

1. Seleccione Tema en el panel de administración.
2. En la vista previa de su blog, seleccione el botón Editar HTML.
3. Presiona Ctrl+F y busca lo siguiente:

<b:skin><![CDATA[

4. Justo después de ese código pega el siguiente código CSS.

/**********************************************************************/
/* Pretty printing styles. Used with prettify.js. */

pre .str, code .str { color: #65B042; } /* string  - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag    - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name  - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */

code.prettyprint {
	background-color:#020209;
	border-radius:3px;
	padding:0.2em; 
	margin:0.2em;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

pre.prettyprint {
	background-color: #020209;
	border-radius: 8px;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
	width: 95%;
	max-height: 400px;
	margin: 10px auto; 
	white-space: pre-wrap;
	padding: 20px !important;
	overflow: hidden;
	overflow-style:auto;
	overflow-y:hidden;
	overflow-x:hidden;
	font-size:16px;
	
}

/*Hover effect for prettyprint code block*/
pre.prettyprint:hover {
	overflow: auto;
	overflow-style:auto;
}

/*Selection effect for prettyprint code block*/
pre.prettyprint ::selection {
	background: #0000FF;
	color: #FFF;
}

/*Selection effect for prettyprint code block in Mozilla*/
pre.prettyprint ::-moz-selection{
	background: #0000FF;
	color: #FFF;
}


/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #666666; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: decimal !important; }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 {
background-color: #020209 !important; }

@media print {
  pre .str, code .str { color: #060; }
  pre .kwd, code .kwd { color: #006; font-weight: bold; }
  pre .com, code .com { color: #600; font-style: italic; }
  pre .typ, code .typ { color: #404; font-weight: bold; }
  pre .lit, code .lit { color: #044; }
  pre .pun, code .pun { color: #440; }
  pre .pln, code .pln { color: #000; }
  pre .tag, code .tag { color: #006; font-weight: bold; }
  pre .atn, code .atn { color: #404; }
  pre .atv, code .atv { color: #060; }
}
/**********************************************************************/

4. Seleccione Guardar para confirmar sus cambios.

Ó también podrías utilizar los estilos predeterminados de Google Prettify, solo tendrías que aumentar una extensión al script que agregaste en el Paso 1 al momento de instalar.

?skin=default
?skin=desert
?skin=sunburst
?skin=sons-of-obsidian
?skin=doxy

Y quedaría de esta forma:

<script src = "https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst" />

La galería completa de estilos se puede encontrar AQUI.

LIMITACIONES
Desafortunadamente, al igual que otros resaltadores de sintaxis, la biblioteca no puede resolver el uso de los caracteres "<" y ">" que se utilizan con frecuencia en los lenguajes basados en xml.
Debe reemplazar cada carácter con sus respectivos valores codificados.

Ó podrías hacer uso de esta aplicación para Parsear HTML AQUI.



Si esta información te resulto útil, no dejes de recomendarnos compartir, gracias.