web_code_block Shortcode
The web_code_block shortcode displays source code as text with optional syntax highlighting. It never executes the supplied HTML, PHP or JavaScript. Gutenberg authors can use the native Code block with POM controls.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Usage
[web_code_block language="html" prism_theme="dark" code_content="JTNDcCUzRUhlbGxvJTNDJTJGcCUzRQ=="]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
language |
html |
html, css, javascript, php, py, cs, java |
Select the language you'd like to be highlighted. |
other_language |
— | Prism language identifier | Overrides language; the grammar must already be available. It does not download another language. |
prism_theme |
dark |
none, light, dark |
Select the PrismJS color theme for this code block. |
code_content |
— | Base64 of URL-encoded source | The Page Builder Code field manages this encoding. Empty or invalid Base64 produces no output. |
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
el_id |
— | Valid unique HTML ID | Optional anchor for this code block. |
el_class |
— | String unless stated otherwise | If you wish to style a particular content element differently, then use this field to add a class name and then refer to it in your CSS file. |
Source encoding and languages
The example displays <p>Hello</p> literally. Integrations must URL-encode the source before Base64 encoding it; for example, PHP can use base64_encode(rawurlencode($source)). The callback decodes it once and escapes it as text. Literal entities such as <, tabs and newlines are preserved, as are shortcode and template-expression examples. The bundled languages are HTML/XML/SVG, CSS, JavaScript, PHP, Python, C# and Java. Both python/py and csharp/cs identifiers work; unknown grammars remain readable plain text.
Customize the themes
Go to Settings → POM Theme → Advanced → Custom CSS, expand Shortcode CSS assets, and open the contiguous Code block — Light theme or Code block — Dark theme accordion. Each comparison shows the readable scoped Prism CSS beside its editable source. Saving creates an optimized per-site replacement for only that theme; reverting restores the matching code-block-prism-light.min.css or code-block-prism-dark.min.css asset.
The prism_theme attribute keeps selecting the stylesheet: light requests only web-code-block-prism-light, dark requests only web-code-block-prism-dark, and none requests neither. The replacement changes CSS only. It does not change web_code_block, Base64 decoding, HTML escaping, language aliases, generated wrapper, pre, code or token markup, the Prism script, or request conditions.
Verification
Test separate blocks with prism_theme="light", prism_theme="dark", and prism_theme="none"; confirm that each loads only its expected theme asset while the Prism script highlights the chosen language. Inspect indentation and literal characters. Existing content remains readable without JavaScript. AJAX-inserted content is highlighted by the shared theme lifecycle without duplicating unchanged tokens. After editing both themes, verify their managed CSS independently and confirm that a page containing neither this shortcode nor native Code blocks loads neither theme nor the script. The shortcode remains available when the Legacy Page Builder interface is disabled.