web_code_block Shortcode
The web_code_block shortcode renders the code block component.
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]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 |
— | String unless stated otherwise | Can't find the language you're looking for? Look here and include the code for your language. |
prism_theme |
dark |
none, light, dark |
Select the PrismJS color theme for this code block. |
code_content |
— | String unless stated otherwise | Controls the content. |
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
el_id |
— | Valid unique HTML ID | Enter section ID (Note: make sure it is unique and valid, according to w3c specification). |
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. |
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
Limit web_code_block to trusted authors, review the supplied source carefully and confirm it does not block the rest of the page. 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. After editing both themes, verify their managed CSS independently and confirm that a page without web_code_block loads neither theme nor the script.