Tutorials and documentation
Show configuration, PHP or CSS snippets readers can copy without stray line numbers.
Content / widget · Elementor module
Code Example Block Plugin for Elementor
Show code snippets as literal, escaped text in a styled, keyboard-scrollable block with optional line numbers and a language label.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Code example blockProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
Snippets rendered by the real widget
These are the actual published outputs of the widget: the default block, a dark theme with line numbers, HTML shown literally, long lines wrapped, and a snippet shortened to a line limit.
02 / Inside WordPress
Code example block controls in Elementor
Content › Source holds the code and a visible language label. Behaviour sets line wrapping, a maximum number of lines, the shortened note and the empty-code message. Display sets the region's accessible name, a language class for your own tools, an optional icon and line numbers with a starting number. The Style tab covers code typography, tab size, maximum height, padding, radius, Normal, Hover and Focus colours and borders, line number colour and width, the language label and the notes.
03 / Website use cases
Where to use code example block
Pasting code into a text widget can break the page: HTML runs, entities collapse and whitespace disappears. Code example block prints your snippet exactly as typed inside a proper pre and code element, with a language label, optional line numbers that are never copied, and a scrollable region keyboard users can reach.
Developer blogs
Embed command lines and examples that keep their exact spacing and characters.
Support pages
Share short code fixes with clear labels and wrapping on mobile.
04 / Installation and setup
How to add a code snippet in Elementor
Start with Complementor installed and your license connected. Enable this module in the WordPress library, then configure it in Elementor.
Install Complementor, connect your license and enable Code example block in the Complementor library.
Drag the widget onto a page and paste your code into Content › Source › Code.
Type a language label such as PHP or CSS, and optionally a language class for your own highlighter.
Choose wrapping, line numbers and a maximum height for long snippets.
Style the block, publish, and tab to the block to check it scrolls with the keyboard.
05 / Content and style controls
Customize code example block in Elementor
Configure the settings available for this module to suit the page you are building.
Code shown exactly as typed; HTML, scripts and shortcodes are displayed, never run.
Visible language label and an optional language-xxx class on the code element.
Wrap long lines, or scroll sideways in a keyboard-focusable, named region.
Optional line numbers with a starting number; they are never selected or copied.
Line and character limits with an editable shortened note, and an empty-code message.
Style: typography, tab size, maximum height, padding, radius, Normal/Hover/Focus colours and border, line numbers, label and notes.
06 / Choose the right approach
Code example block and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
Elementor Pro Code Highlight
Elementor Pro's Code Highlight adds syntax colouring and a copy button using a script. Use it when you need highlighting; use this widget for a lightweight, script-free block in Elementor without Pro.
WordPress Code block
The block editor's Code block shows preformatted text in posts. This widget brings the same idea into Elementor layouts with labels, line numbers and Elementor styling.
07 / Requirements and compatibility
Code example block compatibility with Elementor
- Requires Elementor; no syntax highlighting or copy button.
- Up to 1,000 lines and 20,000 characters per block.
- Manual code only; no file or URL source.
Complementor uses classic Elementor APIs. Atomic-native controls are not implemented. Check your theme, cache and integrations on a staging site before release.
08 / Common setup problems
Troubleshoot code example block
Check these settings if the published page behaves differently from the editor.
Why is there no syntax colouring?
The widget does not highlight code. Add a language class and your own highlighter, or use Elementor Pro's Code Highlight.
Why was my snippet shortened?
It is longer than Maximum lines shown, or longer than the hard limits of 1,000 lines and 20,000 characters. The note shows how many lines are displayed.
Why do long lines scroll instead of wrapping?
Wrap long lines is off by default to keep code exact. Turn it on, or keep scrolling; the block can be scrolled with the keyboard.
Why is the widget empty on the live page?
The code is empty. The empty message shows only in the editor unless you turn on Show empty message on the live page.
Code example block plugin questions
Can code in the block run on my site?
No. Everything is escaped and shown as text, including scripts and shortcodes.
Does it need Elementor Pro?
No. It works with the free version of Elementor.
Are line numbers copied with the code?
No. They are drawn by CSS, so selecting and copying takes only the code.
Does it load JavaScript?
No. It is rendered on the server with a small stylesheet only.
Is it accessible?
Yes. The scroll area is a named, focusable region, so keyboard users can reach and scroll it.
10 / Annual All Access subscription
Get code example block with Complementor
This module is included with all 1007 current Complementor solutions. Choose your production website allowance; every plan includes the same modules.
One website
$29USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $29 USD each year.
A few websites
$49USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $49 USD each year.
More websites
$99USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $99 USD each year.
Applicable taxes extra. Annual subscriptions renew automatically unless canceled in your customer account. Elementor Pro is required for Exclude current post. Read the terms and 14-day technical-issue refund policy.