Hoy aprenderemos a integrar el resaltador de sintaxis Prism en Blogger. Destaca por ofrecer multitud de funciones muy bien optimizadas. Funciona gracias a JavaScript, CSS y HTML. Los diseños que nos brinda son elegantes y modernos, aportándonos distintas gamas de colores para cada tema. Haz click en esta imagen para ver una demostración de todos los temas y lenguajes de sintaxis disponibles.
Lo primero que haremos, será acceder a la página de Prism Syntax Highlighter y empezar a configurar el script a nuestro gusto. Los lenguajes que vienen por defecto son Markup, CSS, C-like y JavaScrip, pero puedes activar los que quieras de todos los que nos ofrecen.
Al final de los lenguajes, veremos la sección de Plugins, de los cuales recomiendo activar los que se aprecian en esta captura.
AVISO: Ten en consideración que cuantos más lenguajes y plugins integremos en nuestro script, más pesados serán los archivos a descargar, y por ende, los tiempos de carga que obtendremos también.
Una vez customizado, vamos al final de la página, donde encontraremos estos dos simpáticos botones.
Pulsaremos ambos y nos descargará de forma automática el script y los estilos CSS que hemos configurado previamente.
Acto seguido, debes alojar los archivos que recién descargamos en algún servicio de hosting como Google Sites, Drive o Dropbox,
pero para lograrlo en los dos últimos servicios nombrados sería necesario seguir las indicaciones de esta publicación.
Si no sabes como utilizar Google Sites como hosting mírate esta guía ya que está elaborada con estos archivos de ejemplo.
Para esta ocasión no servirán otras plataformas como Mega o MediaFire. Pues la cuestión es que sí nos permiten el alojamiento de archivos con formato
Puedes echarle también un vistazo a esta guía para conocer los mejores servicios de hosting gratuitos para alojar este tipo de formatos.
A continuación, copiamos el URL del archivo
<!-- Prism Syntax Highlighter Script -->
<script src='URL de tu archivo .js' type='text/javascript'/>
Ahora insertaremos el código del script ya adaptado en la plantilla para que así blogger disponga de la ubicación exacta del archivo y pueda ejecutarlo. Para ello nos dirigimos a la parte de Tema > Editar HTML de nuestra plantilla y abrimos el buscador del editor.
Se activa presionando Ctrl + F y se ve así
En ese mismo buscador escribimos la etiqueta
Ahora haremos un proceso parecido para el archivo
<!-- Prism Syntax Highlighter Link -->
<link href='URL de tu archivo .css' rel='stylesheet' type='text/css'/>
Por último, pegaremos este segundo código adaptado con tu URL entre las etiquetas
Si seguiste bien todos los pasos, ya tendríamos el resaltador de sintaxis completamente instalado y funcional.
Ahora explicaré como insertarlo en páginas o entradas. Para ello iremos a la pestaña HTML dentro del editor de publicaciones.
Una vez abierto, para cargar nuestro script necesitamos escribir la etiqueta
Finalmente debe quedarte algo así:
<pre><code class="lang-markup">
...Aquí va tu código...
</code></pre>
Ahora quedaría sustituir el valor
Haz click aquí para ver la lista completa y actualizada de todos los lenguajes de sintaxis con soporte.
Es indispensable el uso de la herramienta Quick Escape para que el script respete el código nativo ingresado. Esto se hace mediante un tipo de convertidor denominado HTML Escape Text, el cual se encarga de procesar y adaptar los caracteres ilegibles para el script.
Texto Sin Tratar
<p class="hey">Texto de ejemplo</p>
Resultado
Texto de ejemplo
Texto Convertido
<p class="hey">Texto de ejemplo</p>
Resultado
<p class="hey">Texto de ejemplo</p>
Si marcaste el Plugin Line Numbers, tendremos la posibilidad de activar la numeración automática para cada salto de línea. Esta opción viene muy bien para códigos largos en los que queramos tener un poco más de orden a la hora de leerlos o configurarlos.
Para incorporar la numeración en el script, añadiremos
<pre><code class="lang-markup; line-numbers">
...Aquí va tu código...
</code></pre>
También podemos añadir un scroll vertical a nuestro script para hacerlo más compacto, dado que ya posee uno horizontal propio.
Para conseguirlo tendremos que hacer uso de la etiqueta
Con el valor
El código que añadiremos junto con los anteriores debe quedar así
<div style="height: 234px; overflow: auto;">
<pre><code class="lang-markup; line-numbers">
...Aquí va tu código...
</code></pre>
</div>
El resultado final sería este
/* *****************************************************************
DESLIZA HACIA ABAJO PARA VER LAS IMÁGENES HECHAS CON TEXTO
***************************************************************** */
☆ ∩∩ （ • •）☆
┏━∪∪━━━━━━━┓
☆
❝ sKt0r MØÐS ❞
┗━━━━━━━━━━━┛
┊┊┊┊
┊┊┊☆
┊┊🌙 *
┊┊
┊☆ °
🌙*
。 ☆ 。 ☆。 ☆
★。 ＼ ｜ ／。 ★
S。K。T。0。R
★。 ／ ｜ ＼。 ★
。 ☆。 。 ☆。
_/﹋\_
(҂`_´)
<,︻╦╤─ ҉ - - S e k t o r - - M 0 Ð S - >
_/﹋\_
420 ArMy
·
˚ * .
* * ⋆ .
· ⋆ ˚ ˚ ✦
⋆ · *
⋆ ✧ · ✧ ✵
· ✵
█───▄▀▀▀▀▄─▐█▌▐█▌▐██
█──▐▄▄────▌─█▌▐█─▐▌─
█──▐█▀█─▀─▌─█▌▐█─▐██
█──▐████▄▄▌─▐▌▐▌─▐▌─
███─▀████▀───██──▐██
Para añadir sombras a nuestro diseño final no será necesario editar el archivo .css destinado a los estilos del script. Simplemente tendremos que volver a hacer uso de la etiqueta
El código que añadiremos debe quedar así
<div style="box-shadow: 4px 4px 4px -1px #777777; border-radius: 5px;">
<pre><code class="lang-markup; line-numbers">
...Aquí va tu código...
</code></pre>
</div>
Con el valor
Resultado de las sombras sin redondear los bordes
Fíjate en el error en las esquinas de este recuadro
El resultado final al redondear los bordes
Fíjate en las esquinas arregladas de este recuadro
Además puedes crear tus propios estilos para las sombras con Generadores de CSS Online. Para acceder a uno de los mejores generadores haz clic en este enlace y serás redirigido a la página donde podrás editar todos los parámetros de forma totalmente visual.
No hay comentarios:
Publicar un comentario