La manera más fácil y rápida de entender el código fuente es resaltar su sintáxis con diferentes colores.
En la red podemos encontrar multitud de servicios online para resaltar bloques de código fuente. Algunos de los más conocidos son:
Otras páginas nos ofrecen la posibilidad de descargar archivos (ficheros javascript y css) para instalar en nuestra web:
- SyntaxHighlighter
- Snippet (plugin jQuery)
- highlight.js
- SHJS (Syntax Highlighting in JavaScript)
- Lighter (GitHub)
- CodePress
- WordPress Rainbow Hilite (plugin para Wordpress)
- Syntax Highlight (plugin para Wordpress)
- WP-Syntax highlighted (plugin para Wordpress)
- No necesito instalar ninguna librería
- Es muy fácil de usar: para integrarlo en mi blog, voy a escribir muy pocas líneas de código (a continuación os mostraré varios ejemplos).
- No bloquea la carga de la página mientras se ejecuta
- Detecta automáticamente los bloques de código y el lenguaje de programación usado
- Reconoce los lenguajes tipo C, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Ruby, PHP, VB, y Awk
- Es compatible con la mayoría de los navegadores web
-
Escribimos la línea
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&skin=default" defer="defer"></script>
dónde skin es la hoja de estilos que vamos a cargar.skin = default
skin = sons-of-obsidian
skin = sunburst
skin = desert
skin = doxy
- A continuación escribimos la etiqueta <pre class="prettyprint">
-
Introducimos el código que vamos a colorear dentro del tag pre.
Importante: hay que reemplazar todos los < por < y los > por > para que el navegador entienda que es texto plano. - Por último, cerramos la etiqueta </pre>
Ejemplo con 'sons-of-obsidian':
Ejemplo con 'sunburst':
Ejemplo con 'desert':
Ejemplo con 'doxy':
Además podemos numerar las líneas de código para cada uno de los estilos mencionados.
Para ello, tenemos que añadir la clase linemus al tag pre de la siguiente manera:
<pre class="prettyprint linenums">Ejemplo con 'default' y 'linemus':
Documentación oficial:
https://github.com/google/code-prettify/blob/master/README.md
https://github.com/google/code-prettify
https://rawgit.com/google/code-prettify/master/examples/quine.html
Muy buena entrada, me ha sido de utilidad.
ResponderEliminarGracias
Gracias a ti Jose Antonio por visitar el blog y por dejar el comentario :)
ResponderEliminarUn saludo!!
Muchas gracias por compartir, lo estoy probando en mi blog, se ve muy bien. Lo único malo es que en el caso del SQL no me lo resalta como me gustaría con sus palabras reservadas ¿Lo has probado con SQL?. Hasta ahora usaba Syntax Highlighter del que no tenía quejas, pero la carga de los scripts es algo pesada.
ResponderEliminarHola Lilian,
ResponderEliminargracias a ti por visitar el blog y por comentar :)
La librería Syntax Highlighter funciona perfectamente pero como indicas, pero prefiero usar Google Code Prettify por la facilidad de uso y su rápida ejecución.
Si es posible marcar las palabras reservadas del lenguaje SQL, para ello hay que hacer unos pequeños ajustes de forma muy simple:
- a continuación de la librería run_prettify, tienes que importar el fichero lang-sql.js
- y en el tag PRE debes indicar que se trata de codificación sql especificando el atributo lang-sql
Este sería un ejemplo muy sencillo que puedes probar en local:
<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&skin=sunburst" defer="defer"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/lang-sql.js" defer="defer"></script>
<pre class="prettyprint lang-sql">
SELECT
t1.constraint_type AS tipo_restriccion,
t4.table_name AS tabla_referencia,
t4.column_name AS columna_referencia
FROM information_schema.table_constraints t1
LEFT JOIN information_schema.key_column_usage t2
ON t1.constraint_catalog = t2.constraint_catalog
AND t1.constraint_schema = t2.constraint_schema
AND t1.constraint_name = t2.constraint_name
LEFT JOIN information_schema.referential_constraints t3
ON t1.constraint_catalog = t3.constraint_catalog
AND t1.constraint_schema = t3.constraint_schema
AND t1.constraint_name = t3.constraint_name
LEFT JOIN information_schema.constraint_column_usage t4
ON t3.unique_constraint_catalog = t4.constraint_catalog
AND t3.unique_constraint_schema = t4.constraint_schema
AND t3.unique_constraint_name = t4.constraint_name
WHERE
t1.table_schema = '[NOMBRE_ESQUEMA]' AND
t1.table_name = '[NOMBRE_TABLA]' AND
t2.column_name = '[NOMBRE_COLUMNA]'
ORDER BY
t1.constraint_type DESC;
</pre>
</body>
</html>
No se ven los colores, que podría estar pasando?
ResponderEliminarHola Anny,
ResponderEliminarme puedes especificar en qué página del blog estás haciendo las pruebas para echarle un vistazo?
Gracias.
Hola. Siempre las ovejitas vuelven al redil... y esta beta-tester no es la excepción. Acá ando, tratando de poder utilizar "prettyprint linenums" y se me numeran las líneas de a 5 y el texto se sale del margen... ¿Se puede corregir?
ResponderEliminarMil gracias.
Por otro lado, te iba a subir el html con el código cargado y me vengo a enterar del fin de RawGit. Por lo visto, los enlaces viejos siguen funcionando.
EliminarLo dejo por acá: https://github.com/MoniAlus/Codiguitos/blob/master/Index.html
Mil disculpas.
Hola Mónica,
ResponderEliminaren este caso la solución era muy sencilla.
Tienes que añadir lo siguiente:
1- a continuación del body, añade el siguiente bloque de código css:
<style>li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8{list-style-type:decimal!important}</style>
2- dentro de la etiqueta pre añade style="white-space:pre;overflow:auto;"
Tal que así:
<pre class="prettyprint linenums" style="white-space:pre;overflow:auto;">
Saludos!!
Mil gracias. Todavía me falta "afinar" el código (confieso que he copiado tu idea del iframe).
Eliminar¿Hay alguna manera, por favor, de que las líneas aparezcan en todo el "scroll" horizontal?
Hice esto hasta ahora: https://monialus.github.io/iframe.html.
Sí, hay una forma Mónica.
ResponderEliminarLa etiqueta <pre> representa un bloque de texto preformateado donde los espacios y los saltos de línea son respetados.
Partiendo de esa premisa, bastaría con dejar espacios en blanco en la línea que genera el scroll horizontal de la siguiente forma:
.contenedor {position:relative!important; width:95%; height:auto; margin:10px auto; color:#ffffff; padding: 10px 0px 10px 0px; background:#3d84c6; font-size:16px; font-family:Arial; border-radius:10px 0px 10px 0px; text-align:center;}
Saludos!!
¡Listo! Otra vez, ¡¡¡GRACIAS!!!
EliminarAguegué los espacios que dijiste y coloqué el white-space en pre-wrap, porque en caso contrario no se generaban las multilíneas.
Como siempre, "sacas las papas del fuego" en tiempo récord.
Los blogueros, agradecidos. Ni idea tienes lo que significa contar contigo "charco" de por medio.
¡Saludos!
Muchísimas gracias Mónica,
ResponderEliminarya sabes que puedes contar conmigo para lo que quieras :)
Un abrazo!
Excelente post. empero, la lectura me lleva a formular una pregunta. Sucede que en la lectura de otro post, pude apreciar que el autor colocaba los atributos separadamente, o sea: no opener, no referrer, no follow. Y mi pregunta es si con esa sintaxis puede funcionar el atributo, es decir, ¿puede interpretarse esa sintaxis como una manera igualmente válida?. De antemano, gracias.
ResponderEliminarLa sintaxis correcta es rel="nofollow noopener noreferrer". Cualquier otra sintaxis será errónea y los navegadores no validarán estos atributos por lo que nos los tendrán en cuenta
ResponderEliminar