Muchos sitios web muestran el código fuente en sus artículos. Mostrar el código fuente no siempre es fácil. La mayoría de los sitios usan complementos que requieren etiquetas, códigos cortos, enlaces incrustados o soluciones similares. Las soluciones a veces pueden parecer torpes e incluso causar problemas de formato. Otra opción es un complemento para Divi llamado Code Snippet Module.
Code Snippet Module es un complemento de terceros que agrega un nuevo módulo a Divi Builder para mostrar el código. Esto es diferente del módulo Divi Builder Code. El módulo Código estándar ejecuta el código que colocas dentro de él. El módulo Code Snippet muestra el código con resaltado de sintaxis. Code Snippet Module funciona con Divi, Extra y el complemento Divi Builder.
En este artículo veremos cómo funciona el módulo, cómo se puede diseñar para que encaje con el diseño de su sitio web. El código para resaltar este complemento se tomó de W3Schools.com y solo pretende demostrar cómo se muestra el código dentro del módulo de fragmento de código. Las imágenes de los diseños de ejemplo se tomaron de Unsplash.com.
Cargue y active el complemento de forma normal. No se requiere información de la cuenta. El módulo Code Snippet se agregará a Divi Builder.
El módulo incluye el cuadro de código en la pestaña Contenido. La pestaña Diseño tiene muchas configuraciones para diseñar el código. Las configuraciones incluyen idioma (para resaltar), estilo (el esquema de color), mostrar números, ancho de pestaña personalizado y muchos estilos de fuente. También incluye el encabezado estándar y el estilo del borde.
Intentará detectar automáticamente el idioma de forma predeterminada. Si tiene problemas con la detección automática, es posible que parte del código no esté formateado correctamente. Si esto sucede, puede elegir el idioma manualmente. No tuve problemas con la detección automática de formato del idioma correctamente.
Tiene más de 70 estilos. En su mayoría cambian los colores de las fuentes y los fondos. Algunos tienen patrones de fondo, pero la mayoría son colores sólidos. Las fuentes coinciden con un tipo de código, por lo que las variables serán de un color, las declaraciones serán de otro, los comentarios usarán un color diferente, etc.
Uso del módulo de fragmentos de código
La imagen de arriba muestra el módulo Divi Code estándar en la parte superior y el módulo Code Snippet en la parte inferior. Esto muestra cómo reaccionan los dos módulos con el código. Ambos módulos tienen el mismo código HTML colocado dentro de ellos. El módulo Divi Code ejecuta el código. El módulo Code Snippet muestra el código.
Esta es la configuración predeterminada. Echemos un vistazo a varios idiomas usando diferentes estilos. He incluido la configuración predeterminada para cada uno para ayudarlo a comparar.
HTML
Este es el mismo código que en el ejemplo anterior. Está usando el estilo predeterminado, pero agregué números de línea y cambié la fuente a Georgia. Aumenté el tamaño de la fuente a 18 puntos. Las etiquetas están en negrita.
Aquí hay un vistazo a los comentarios en la configuración predeterminada. Los comentarios son de color gris claro, por lo que se ven diferentes al marcado.
Este usa el estilo llamado Darkula. Las etiquetas están en naranja.
CSS
Los selectores y las propiedades de CSS están en negrita. Los valores numéricos están en rojo. Las llaves y los valores textuales utilizan la fuente de código predeterminada. Esto utiliza la detección automática y el estilo predeterminado.
Este es el estilo Ágata. Los selectores están en naranja y las propiedades en amarillo. Las llaves y los valores textuales están en la fuente blanca predeterminada, mientras que los valores numéricos están en rojo.
Los comentarios CSS son de color gris claro en la configuración predeterminada.
Este ejemplo usa Codepen Embed.
Este es Estuario Oscuro. He incluido números de línea.
Aquí está la luz del estuario. He incluido los números de línea en este también.
JavaScript
Aquí hay un fragmento de JavaScript que usa la configuración predeterminada. Las declaraciones están en verde y gris, mientras que el elemento HTML y los valores están en rojo.
Esto es JavaScript usando el estilo llamado Android Studio. Las declaraciones están en azul grisáceo, mientras que el elemento HTML y los valores están en verde.
Aquí está el mismo fragmento usando Arduino Light. Agregué un fondo azul a la fila para que se destaque el módulo del fragmento de código. Las declaraciones están en rojo y azul grisáceo, mientras que el elemento HTML y los valores están en verde.
Este incluye comentarios. Los comentarios son multicolores.
Este es el mismo código que usa Dune Dark.
Esta es la luz de las dunas.
Este usa Lejos. He añadido números de línea.
sql
Las declaraciones SQL están en negrita mientras que las tablas usan la fuente predeterminada. Los valores están en rojo.
Esto usa el estilo llamado Brown Paper. Las declaraciones están en azul, las tablas en negro y los valores en morado. Este es uno de los pocos estilos que usan un patrón en el fondo.
Aquí está la configuración predeterminada con comentarios. Los comentarios son más ligeros que el resto del código.
Aquí hay un vistazo a la Fundación. He incluido números de línea.
PHP
Las etiquetas de lenguaje PHP están en azul. Las palabras clave usan la fuente predeterminada, las funciones están en negrita y las variables en rojo.
Este ejemplo usa Cave Dark. Las etiquetas de lenguaje PHP están en rojo. Las palabras clave están en gris, las funciones están en púrpura y las variables están en azul/verde.
Esta es la luz de la cueva. Tiene un fondo ligeramente morado y los colores del código son una variación de Cave Dark.
Este tiene comentarios usando la configuración predeterminada.
Este estilo es Github. Los comentarios están en cursiva.
Esto es Github Gist.
Este es el código de Google.
Este es Visual Studio. Esto les resultará familiar a los usuarios de VS. He añadido un fondo para ayudar a que se destaque. Usar un borde es otra opción.
Oreja
Aquí hay un ejemplo de Bootstrap usando los estilos predeterminados. Bootstrap no se establece específicamente como lenguaje (ya que es un marco HTML, CSS y JavaScript), pero quería mostrar que tiene el formato correcto.
Esto es Pojoaque.
jQuery
Aquí hay un vistazo a jQuery.
Esto utiliza XT256. Le he dado un borde para que se destaque.
XML
Aquí hay un ejemplo de XML usando la configuración predeterminada.
Este es Zenburn. Elegí XML del menú desplegable y, como puede ver, la detección automática en la imagen anterior ha formateado el código correctamente.
Este es el Libro de la Escuela. He añadido números de línea. El código se alinea con las líneas de la página en este tamaño de fuente. Aumentar el tamaño los alinea de manera diferente.
Hacer ajustes
Este es un fragmento de PHP. Hagamos algunos cambios manuales en el diseño.
Cambié el tipo de fuente del código, el tamaño, el color y la altura de la línea. También agregué un borde.
Ancho de pestaña
En este ejemplo (que usa Sulphur Pool Light), agregué pestañas antes de pegar el código. Afortunadamente, puede ajustar el ancho de la pestaña para que el código se muestre correctamente.
Ajusté el ancho de la pestaña a 1, lo que disminuye la cantidad de sangría de la pestaña. Este es Sulphur Pool Dark.
Estilo personalizado
El área de visualización del fragmento de código puede incluso diseñarse con CSS. La documentación incluye algunos ejemplos de estilo. Este es uno de los ejemplos proporcionados.
Ejemplos de diseño
Por supuesto, la ventaja del módulo es que utiliza Divi Builder y encaja con sus diseños Divi. Hay suficientes estilos para que puedas adaptarlos al diseño de tu sitio con facilidad. Este usa Paraiso Light. Encaja bien con el estilo de mi página de muestra.
Este es Railcasts. He personalizado el estilo, el tamaño y el color de la fuente del encabezado para que coincida con los encabezados de la página.
Este usa el diseño de publicación de blog de Divi 100 . El estilo del código es Luz solarizada.
También funciona muy bien con Extra. Este ejemplo usa Plateau Dark.
Licencia y Documentación
Tiene instalaciones ilimitadas. Incluso viene con una garantía de devolución de dinero de 60 días. La documentación se proporciona en el sitio web del desarrollador . Incluye instrucciones y ejemplos de estilo CSS.
Pensamientos finales
Code Snippet Module es una excelente manera de mostrar código dentro de sus diseños Divi. Es fácil cambiar la apariencia y el código está limpio y se puede copiar para pegar. Solo he mostrado un pequeño puñado de los muchos idiomas con los que es compatible y no tuve problemas con el formato. Todos los estilos funcionan con todos los idiomas y se pueden diseñar aún más usando CSS. Si proporciona código para sus lectores, Divi Snippet Module podría ser el complemento que necesita.
¡Queremos escuchar de ti! ¿Ha utilizado el módulo Code Snippet? Háganos saber lo que piensa en los comentarios a continuación.
Imagen destacada vía hanss / shutterstock.com