Shortcode web_code_block
El shortcode web_code_block muestra código fuente como texto con resaltado de sintaxis opcional. Nunca ejecuta el HTML, PHP o JavaScript suministrado. Los autores de Gutenberg pueden usar el bloque nativo Code con controles POM.
Los atributos siguientes coinciden con los controles actuales del Page Builder y con la salida pública. Usa sintaxis en bruto únicamente para contenido revisado que no pueda mantenerse mediante los controles visuales.
Uso
[web_code_block language="html" prism_theme="dark" code_content="JTNDcCUzRUhlbGxvJTNDJTJGcCUzRQ=="]Atributos
| Atributo | Predeterminado | Valores aceptados | Propósito |
|---|---|---|---|
language |
html |
html, css, javascript, php, py, cs, java |
Selecciona el lenguaje que deseas resaltar. |
other_language |
— | Identificador de lenguaje de Prism | Anula language; la gramática debe estar ya disponible. No descarga otro lenguaje. |
prism_theme |
dark |
none, light, dark |
Selecciona el tema de color de PrismJS para este bloque de código. |
code_content |
— | Base64 del código fuente codificado como URL | El campo Code del Page Builder gestiona esta codificación. Un Base64 vacío o inválido no produce salida. |
device_visibility |
— | Cadena salvo que se indique lo contrario | Aplica la regla de visibilidad adaptativa seleccionada. |
el_id |
— | ID HTML único válido | Anclaje opcional para este bloque de código. |
el_class |
— | Cadena salvo que se indique lo contrario | Si deseas aplicar un estilo diferente a un elemento de contenido concreto, usa este campo para añadir un nombre de clase y luego haz referencia a él en tu archivo CSS. |
Codificación del código fuente y lenguajes
El ejemplo muestra <p>Hello</p> literalmente. Las integraciones deben codificar el código fuente como URL antes de codificarlo en Base64; por ejemplo, PHP puede usar base64_encode(rawurlencode($source)). La devolución de llamada lo descodifica una vez y lo escapa como texto. Se conservan las entidades literales como <, las tabulaciones y los saltos de línea, así como los ejemplos de shortcodes y de expresiones de plantilla. Los lenguajes incluidos son HTML/XML/SVG, CSS, JavaScript, PHP, Python, C# y Java. Funcionan tanto los identificadores python/py como csharp/cs; las gramáticas desconocidas permanecen como texto plano legible.
Personalizar los temas
Ve a Settings → POM Theme → Advanced → Custom CSS, expande Shortcode CSS assets y abre el acordeón contiguo Code block — Light theme o Code block — Dark theme. Cada comparación muestra el CSS Prism con ámbito legible junto a su código fuente editable. Al guardar se crea un reemplazo optimizado por sitio solo para ese tema; al revertir se restaura el recurso code-block-prism-light.min.css o code-block-prism-dark.min.css correspondiente.
El atributo prism_theme sigue seleccionando la hoja de estilos: light solicita solo web-code-block-prism-light, dark solicita solo web-code-block-prism-dark, y none no solicita ninguno. El reemplazo cambia únicamente el CSS. No cambia web_code_block, la descodificación de Base64, el escapado de HTML, los alias de lenguaje, el contenedor generado, pre, code ni el marcado de tokens, el script de Prism ni las condiciones de solicitud.
Verificación
Prueba bloques separados con prism_theme="light", prism_theme="dark" y prism_theme="none"; comprueba que cada uno carga únicamente su recurso de tema esperado mientras el script de Prism resalta el lenguaje elegido. Inspecciona la sangría y los caracteres literales. El contenido existente sigue siendo legible sin JavaScript. El contenido insertado mediante AJAX se resalta mediante el ciclo de vida compartido del tema sin duplicar tokens sin cambios. Tras editar ambos temas, verifica su CSS gestionado de forma independiente y confirma que una página que no contenga ni este shortcode ni bloques nativos Code no carga ninguno de los temas ni el script. El shortcode sigue disponible cuando la interfaz Legacy Page Builder está desactivada.