Si ofrece algún software o sugerencia de programación, definitivamente querrá compartir fragmentos de código. Esta forma de compartir fragmentos de código puede ayudarlos a establecer una práctica rápidamente. Sin embargo, no es posible compartir código con todo el formato necesario de forma predeterminada. Lo que quiero decir con formato es resaltado de sintaxis. Aún así, es algo bastante fácil de hacer.
Afortunadamente, si usa divi, debe saber que existe una forma integrada de hacerlo manualmente para agregar estilos personalizados a estos fragmentos de código. Además, hay complementos y Recursos aplicaciones de terceros que realmente pueden simplificar el proceso de creación de fragmentos funcionales y estéticamente agradables en Divi.
En este tutorial, le mostraré cómo compartir fragmentos de código en Divi (manualmente). Y también te mostraré cómo diseñar bloques de fragmentos con Divi Builder, lo que te llevará al siguiente nivel.
vista
Aquí hay una descripción general de los diseños de fragmentos posibles en este tutorial.
Los cuadros de fragmentos de código con fragmentos de código agregaron el modo manual.
Prerrequisitos para el tutorial
Para este tutorial, todo lo que necesita es el Tema divi, instalado y activo. Construiremos los fragmentos de código de muestra desde cero utilizando Divi Builder en una nueva página.
Para comenzar, cree una nueva página e implemente Divi Builder en la interfaz pública. Luego elija la opción "Construir desde cero".
¡Ahora estás listo para irte!
Diseño de una caja personalizada para fragmentos de código en Divi
Dado que nuestro fragmento de código reside en un módulo de texto, podemos usar el constructor divi para agregar elementos de diseño en el módulo de texto (y alrededor de él). Para este diseño, usaremos un módulo de resumen que sirva como etiqueta para el fragmento. A continuación, aplicaremos estilo y colocaremos el cursor a la izquierda del módulo de texto. A continuación, aplicaremos estilo al módulo de texto de nuestro fragmento.
Crear la sección, fila y columna
Primero debemos crear una nueva sección con una fila de una columna.
Luego actualice los parámetros de línea de la siguiente manera:
Ancho de canal: 1
Acolchado personalizado: 0px en la parte superior, 0px en la parte inferior
Añadir el módulo de texto.
Luego agregue un módulo de texto a la línea.
Puedes dejar el contenido por defecto. Le agregaremos nuestros fragmentos de código de WordPress más adelante. Por ahora, modelemos el módulo de texto actualizando los siguientes parámetros de texto:
Color de fondo: # eff0f1 Color del texto: # 000000 Margen personalizado: 60 px a la izquierda Relleno personalizado: 3% arriba, 3% abajo, 3% izquierda, 3% derecha
Ancho del borde superior: 10px Color del borde superior: # 7cda24
Creando la etiqueta del fragmento
Para crear la etiqueta del fragmento, usaremos un módulo de propaganda. Esto le permitirá agregar un ícono de texto publicitario (o un ícono de imagen personalizado) junto al idioma del código mostrado.
Cree un módulo de presentación y arrástrelo sobre el módulo de texto. Luego actualice la siguiente configuración de presentación:
Título: css Contenido: [eliminar contenido ficticio] Usar icono: SÍ Icono: ver captura de pantalla
Luego actualice los parámetros de diseño de la siguiente manera:
Color de fondo: # 1b2426 Color del icono: # 7cda24 Ubicación de la imagen / icono: izquierda Tamaño de fuente: 20px Color del título del texto: #ffffff Tamaño del texto Título: 16px
Altura de la línea de título: 1.3em Ancho: 100px Margen personalizado: -44px Inferior, -50px Relleno personalizado izquierdo: 10px Superior, 2px Inferior, 15px Izquierda, 15px Derecha
Sección duplicada para crear más diseños de cuadros de fragmentos
Esto es compatible con nuestro primer diseño de caja de código. Ahora solo tenemos que duplicar la sección que contiene el diseño del bloque de código y actualizar la etiqueta y los colores para crear un nuevo bloque de código para un lenguaje de codificación diferente. Por supuesto, esto es opcional, pero si planea agregar diferentes fragmentos a una página, es útil tener un esquema de color diferente para cada uno.
Por ejemplo, duplique la sección y abra la configuración del módulo Blurb.
Actualice el título a "js" para Javascript.
Luego, haga clic con el botón derecho en Color de imagen / icono y seleccione Buscar y reemplazar.
Opciones de búsqueda y reemplazo actualizadas:
En: esta sección Reemplazar con: [nuevo color] Reemplazar todo: marque reemplazar todos los valores encontrados
Ahora tiene un nuevo bloque de fragmentos de código JS.
A continuación, se muestra un ejemplo de cuadros de fragmentos para tipos de código populares para WordPress.
Uso del complemento Prettify Code para agregar resaltado de sintaxis a fragmentos de código manuales
Bueno, es cierto que con el método manual, puede pegar inmediatamente el texto y pasarlo. la Prettify Code Plugin agregará instantáneamente el código resaltado a todas las etiquetas "pre". La belleza de este complemento es que no se requiere absolutamente ninguna personalización. Todo lo que tienes que hacer es descargar y activar el complemento.
Aquí hay un ejemplo de cómo se verá el código con Active Prettify Code.
El código de Prettify viene de Google y también se utiliza para estilizar todos esos maravillosos fragmentos en stackoverflow.com.
Para terminar
Ver fragmentos de código en Divi no tiene por qué ser difícil. Agregar los fragmentos de forma manual con las etiquetas de código de Word y previas proporcionadas por WordPress hará el trabajo para la mayoría de los fragmentos de código que no sean html, pero primero debe ejecutar el fragmento a través de un codificador. html para estar seguro. Además, puede personalizar aún más el estilo del texto del fragmento utilizando la configuración del módulo de texto. Y no olvide Code Prettify para resaltar sus fragmentos manuales.
Para aquellos de ustedes que regularmente comparten fragmentos, usar el complemento SyntaxHighlighter es probablemente su mejor opción. De cualquier manera, siempre tendrá la opción de agregar diseños más creativos a sus fragmentos usando Divi Builder.
Bonne chance.
