Widget de bloque de código Elementor con resaltado de sintaxis (Pro)
El código fuente es un widget Master Addons Pro para mostrar fragmentos de código en una página de Elementor. Pegue el código, elija uno de los 75 idiomas y uno de los ocho temas de Prism.js, y los renderizadores de bloques con colores de sintaxis, números de línea opcionales y un botón de copia al portapapeles. Los visitantes pueden leer y copiar el código pero no editarlo. Se adapta a tutoriales, documentación, registros de cambios y portafolios de desarrolladores.
Cómo agregar un bloque de código en Elementor
El código fuente necesita Elementor y un activo Complementos maestros Pro licencia.
- Active Master Addons Pro, edite la página con Elementor y busque en el panel de widgets Código fuente.
- Arrástralo donde pertenece el fragmento.
- Elige el idioma Código y a Tema.
- Pegue el fragmento en el Código fuente caja.
- Active el botón de copia y los números de línea, y configure el texto, la visibilidad y la posición del botón.
- En la pestaña Estilo, establezca una altura para fragmentos largos y diseñe el botón, luego obtenga una vista previa de la página y pruebe Copiar.
Cada entorno está cubierto en el Configuración del widget del código fuente guía.
75 idiomas y 8 temas de Prism.js
El Código dropdown enumera 75 idiomas, desde HTML, CSS, JavaScript y PHP hasta Python, Bash, SQL, JSON, YAML, TypeScript, React JSX, Go, Kotlin y Swift. Tema ofrece Default, Dark, Funky, Okaidia, Twilight, Coy, Solarized light y Tomorrow. Elige Personalizado para configurar su propio fondo, color de texto, color de número de línea y tipografía en la pestaña Estilo.
- Utilice un tema de luz como Luz predeterminada o solarizada en las páginas blancas y Okaidia o mañana en las secciones oscuras.
- Personalizado no tiene colores de palabras clave: el código se muestra en el color de texto único que elija, así que use un tema preestablecido cuando desee colores de sintaxis.
- Un widget contiene un fragmento. Coloque varios widgets uno al lado del otro para obtener código y salida.
Elementor Pro Code Highlight frente al código fuente de complementos maestros
Elementor Pro tiene su propio widget Code Highlight. Ambos usan Prism.js, por lo que la elección se reduce a los extras que necesita.
| Característica | Resaltado del código Elementor Pro | Código fuente de complementos maestros |
|---|---|---|
| Precio | Necesita Elementor Pro | Necesita complementos maestros Pro |
| Idiomas | 37 | 75 |
| Temas | 6 (Sólido, Oscuro, Okaidia, Luz Solarizada, Mañana, Crepúsculo) | Más de 8 colores personalizados |
| Botón Copiar | Copiar al conmutador del portapapeles | Texto personalizado, texto copiado, Siempre o Sobre Hover, dos posiciones, estilo completo |
| Números de línea | Sí | Sí |
| Líneas destacadas | Sí | No |
| Envoltura de palabras | Sí | No |
| Altura y tamaño de fuente | Sí | Altura, más tipografía con el tema Personalizado |
Elija Elementor Pro si necesita resaltar líneas específicas o envolver líneas largas. Elija complementos maestros si desea más idiomas, más temas o un botón de copia con estilo. Relacionado: Tabla de contenidos para tutoriales largos y Tabla dinámica para tablas de referencia.
Copie números de botones y líneas
Encender Habilitar botón Copiar para agregar un botón que copie el fragmento completo. Establece su Copiar texto del botón, el Después del texto del botón copiado se muestra después de un clic, Visibilidad del botón (Siempre o al flotar) y Posición del botón (esquina superior derecha o inferior derecha). Habilitar número de línea agrega números en el lado izquierdo.
- Mantenga el botón configurado en Siempre en las páginas de tutoriales para que los lectores lo noten.
- Los números de línea facilitan la referencia a una línea en su texto.
- No existe ninguna opción para resaltar líneas específicas o incluir líneas largas dentro del widget.
Estilismo de contenedores y botones
El Contenedor la sección establece un desplazamiento de fragmentos de altura (hasta 1200 px) tan largo, además de relleno, margen, borde y radio. Con el tema Personalizado también agrega un fondo, tipografía, color de texto y color de número de línea. El Botón la sección estiliza el botón de copia con tipografía, color de texto, color de fondo, relleno, borde y radio.
- Limite la altura en archivos largos para que la página siga siendo legible.
- Haga coincidir el fondo del botón con el color de su marca.
- Agregue relleno para que el código no toque los bordes del bloque.
Preguntas frecuentes sobre el código fuente
¿el widget de código fuente es gratuito?
No. El código fuente es parte de Complementos maestros Pro. Los usuarios de Elementor Pro también tienen el widget Code Highlight de Elementor.
¿Puedo ocultar los números de línea al lado del código?
Da. Set Habilitar número de línea al No por un bloque más limpio.
¿Dónde puedo colocar el botón copiar?
Conjunto Posición del botón a la esquina superior derecha o inferior derecha, y Visibilidad del botón para siempre o en vuelo estacionario.
¿qué idiomas admite el widget de código fuente?
75, elegido en el menú desplegable Código. Incluyen HTML, CSS, JavaScript, PHP, Python, Bash, SQL, JSON, YAML, Markdown, TypeScript, React JSX y TSX, Go, Java, Kotlin, Swift, Ruby, C, C++ y C#. Los visitantes pueden leer y copiar el código pero no pueden editarlo.
¿puedo usar mi propia combinación de colores en lugar de los temas preestablecidos?
Parcialmente. Establezca el tema en Personalizado para elegir el fondo, el color del texto, el color del número de línea y la tipografía en la sección Estilo del contenedor. Los colores de palabras clave solo vienen con los ocho temas preestablecidos, por lo que un bloque personalizado muestra el código en un color a menos que agregue su propio CSS.
¿Puedo resaltar líneas específicas?
No. El widget no tiene opción de resaltado de línea. El widget Code Highlight de Elementor Pro puede resaltar las líneas elegidas si lo necesita.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
