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.