How to set up and style the Code Block widget in Elementor.
Code Block shows code with syntax colors for 25 languages, line numbers, highlighted lines, a file name and a copy button. Choose a dark or light theme and change every color to match your site.
Part of: Bright Addons (free).
| Option | What it does |
|---|---|
| Language | 25 languages, or plain text. |
| Code | The code. It is shown exactly as typed and never run. |
| File Name | Shown in the top bar. |
| Show Language | Shows the language name in the top bar. |
| Line Numbers | Shows numbers next to each line. |
| First Line Number | The number of the first line. |
| Highlight Lines | Line numbers to mark, separated by commas. Ranges like 5-7 work too. |
| Wrap Long Lines | Off: long lines scroll sideways. |
| Copy Button | Adds a button that copies the code. |
| Copy Text | Text of the button. |
| Copied Text | Text shown after copying. |
Pro adds 77 widgets, 10 extensions, a Theme Builder and 32 dynamic tags, and keeps every free widget. From $16 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
color theme, max height, border radius, shadow, code typography and padding.
background, text, top bar, keywords, text in quotes, functions, numbers, comments, tags and properties, line numbers and highlighted line.
HTML and XML, CSS, SCSS, JavaScript, TypeScript, JSX, TSX, JSON, PHP, Python, Bash, SQL, YAML, Java, C, C++, C#, Go, Ruby, Rust, Diff, INI, Dockerfile, Nginx and Apache.
No. It is shown exactly as typed and never run.
Yes. Type the line numbers or ranges in Highlight Lines.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide