10 fragmentos de CSS y JavaScript para resaltar la sintaxis hermosa

Todos estamos familiarizados con el software de codificación de escritorio y los IDE web. Estas características resaltan la sintaxis para facilitar la escritura de código y depuración.

¿Pero sabía que puede tomar el mismo color de sintaxis y agregarlo a su contenido web?

Por supuesto, no todos escriben sobre código o tienen fragmentos de código en sus publicaciones de blog. Pero si escribe muchos artículos de codificación o necesita agregar fragmentos de código a su página de destino, disfrutará de estas soluciones de resaltado de código CSS y JS.

Si está buscando complementos de resaltador de sintaxis para WordPress, eche un vistazo a esta publicación.

1. Cajas de código fuente angular

Aquí hay un fragmento genial creado por Andrew Archibald, construido completamente en Angular.js.

Todos estos cuadros de código de muestra tienen pestañas muy parecidas a las que encontrará en las incorporaciones de CodePen. Pero puedes agregar este tipo de código a tu página sin incrustaciones, todo manejado a través de CSS para el estilo.

Esto reduciría las solicitudes HTTP sobre la incrustación, y esto le da mucho más control sobre el tipo de sintaxis que está utilizando.

Admito que las pestañas son bastante geniales y esto usa la biblioteca de resaltado angular para la compatibilidad de sintaxis en docenas de idiomas.

2)

 Estilo de etiqueta

Aquí hay un ejemplo mucho más detallado para los desarrolladores que escriben largos tutoriales y comparten fragmentos de código masivos.

Este proyecto de diseño de código funciona con dos características: una barra vertical izquierda con números de línea o un fondo oscuro de página completa para el código de muestra.

Puede cambiar el estilo de las opciones de color como desee con solo un poco de jQuery. Sin mencionar que hay una gran variedad aquí para combinar con cualquier diseño de sitio web.

3. Pestañas Textarea

Así que aquí hay un proyecto realmente único desarrollado por Ashley Ktorou que muestra lo que puedes hacer con un simple área de texto.

Los codificadores en la web necesitan ingresar el código en alguna parte. Un área de texto es el elemento perfecto para manejar eso.

Sin embargo, con este fragmento, encontrará un área de texto personalizada con resaltado junto con pestañas personalizadas y una función de pantalla completa. Sin mencionar que todo esto funciona con código básico CSS y JS.

Es una locura que podamos construir editores de código en el navegador hoy en día.

4. Números de línea solo CSS

Este elemento de sintaxis dinámica es realmente muy simple. Pero es debido a esta simplicidad que realmente merece un lugar en esta lista.

Con este código, puede agregar números de línea dinámicos automáticamente en sus bloques de fragmentos. No necesita codificar los números y se ajustarán independientemente de cuántas líneas de código agregue.

Creo que esto puede funcionar bien para un blog con muchos fragmentos de código entre la escritura.

Y es uno de los pocos ejemplos aquí que usa un fondo más claro con texto más oscuro.

5. resaltado de sintaxis Bootstrap con pestañas

¿Desea agregar una función de resaltado de sintaxis junto con Bootstrap? Entonces te has topado con el bolígrafo perfecto del desarrollador Kijan Maharjan.

Esto le permite agregar un widget con pestañas a su página que contiene muchos estilos diferentes para resaltar la sintaxis.

Elige los colores con la biblioteca de código de prettify y configura todo el diseño con pequeñas ediciones en CSS.

6. Demostración de resaltado de sintaxis

Aquí hay una demostración de resaltado muy interesante que admite una amplia gama de idiomas para elegir.

Cada idioma tiene su propio estilo de diseño y combinación de colores, pero también puede editarlos usted mismo con un poco de CSS.

Encontrará algunas opciones homogéneas dentro de fragmentos más básicos como el ejemplo JSON incrustado anteriormente. Sin embargo, esto todavía ofrece variedad y el diseño es lo suficientemente simple como para combinar con cualquier diseño.

7. Prism.js Demo

El script gratuito Prism.js es una de las mejores soluciones de código abierto para resaltar la sintaxis. Es utilizado por blogs de diseño masivo como Smashing Magazine y está disponible gratuitamente para cualquier caso de uso.

Pero si quieres sumergirte en Prism sin mucho código, puedes estudiar este fragmento creado por Bram de Haan.

A partir de ese código, encontrará una configuración muy ligera que puede copiar y cambiar el estilo para que coincida con su sitio. Utiliza rayas de cebra y una barra de desplazamiento personalizada para destacarse realmente de otros elementos en la página.

8. Editor de código CSS puro

Bien, entonces el nombre en esto es un poco engañoso. Técnicamente no es un editor de código que puedes usar que solo se ejecuta en CSS.

Pero este fragmento sigue siendo tremendamente impresionante.

Es una interfaz IDE de código estático recreada usando solo HTML y CSS.

Probablemente no encontrará mucho uso para algo como esto en su sitio web. Pero los estilos de código pueden inspirarte a clonar un diseño similar para tus propios fragmentos.

9. Coloreado de sintaxis

Súper simple y súper básico describe este fragmento creado por Michaël Germini.

Si desea evitar crear su propio resaltado de sintaxis desde cero, este lápiz es para usted. Utiliza un fondo blanco limpio con texto brillante y es una bonita plantilla de inicio.

Solo ten en cuenta que esto es super básico por lo que deberá dedicar un poco de tiempo a editar el estilo para que coincida con su sitio.

10. Guía de códigos

En esta guía de códigos gratuita de Jo Dahl, puede ver cómo se utilizan estos bloques de resaltado de sintaxis en un escenario del mundo real.

La guía lo lleva a través de HTML y CSS con un diseño de cuadrícula muy limpio. Los fragmentos se ven fenomenales, y tienen un esquema de color para captar su atención sin ser molesto para la experiencia de lectura.

Tenga en cuenta este diseño si está creando un blog o sitio web que presente fragmentos de código.

Publicaciones relacionadas

Botón volver arriba