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.