Code with syntax colors, line numbers, highlighted lines, a file name and a copy button. It is free in Bright Addons Blocks Library on WordPress.org, and Bright Addons Blocks Pro includes it too.
Live demo
This is the block itself with its starting settings. Change any of them in the block sidebar.
<?php// Say hello to the visitor.function bright_hello( $name ) { return 'Hello, ' . esc_html( $name ) . '!';}echo bright_hello( 'world' );What you can set
The Code Block block has 5 settings panels. No code needed.
Set language, Code, File name (optional), Show the language and Language label (optional).
Set line numbers, First line number, Highlight lines and Wrap long lines.
Set show the copy button, Button text and Text after copying.
Set theme, Font size (px) and Max height (px).
Set 3 color settings.
How to use it
Settings
The full list, panel by panel, is in the Code Block guide.
| Setting | What it does | Choices |
|---|---|---|
| Language (Code) | Choose one. | Plain text, HTML / XML, CSS, SCSS, JavaScript, TypeScript, JSX, TSX, JSON, PHP, Python, Bash / Shell |
| Code (Code) | Shown exactly as typed. It is never run. | – |
| File name (optional) (Code) | Text you type. | – |
| Show the language (Code) | On or off. | – |
| Language label (optional) (Code) | Leave empty to use the language name. | – |
| Line numbers (Lines) | On or off. | – |
| First line number (Lines) | From 1 to 100000. | – |
| Highlight lines (Lines) | Line numbers separated by commas. Ranges like 5-7 work too. | – |
| Wrap long lines (Lines) | Off: long lines scroll sideways. | – |
| Show the copy button (Copy button) | On or off. | – |
| Button text (Copy button) | Text you type. | – |
| Text after copying (Copy button) | Text you type. | – |
| Theme (Look) | Choose one. | Dark, Light |
| Font size (px) (Look) | From 11 to 22. | – |
Questions
Yes. Code Block is one of the 62 free blocks of Bright Addons Blocks Library on WordPress.org. Bright Addons Blocks Pro includes it as well.
No. It is a block for the WordPress block editor (Gutenberg). Elementor is not needed. If you use Bright Addons Pro for Elementor on the same site, both plugins work side by side.
No. Each block loads only its own small CSS and JavaScript, and only on pages where it is used. Blocks you do not need can be switched off in Bright Blocks.
Yes. The blocks work with block themes and classic themes, and follow your theme fonts. Wide and full width alignment are supported.
Yes. Open Entrance animation in the sidebar and pick one of 40 animations with its duration and delay. Visitors who prefer reduced motion see no animation.
More blocks
Bright Addons Blocks
Blocks Pro has all 99 Pro blocks, the 62 free blocks, Pro effects for every block, Theme Templates and popups.
Yearly and lifetime plans. Use this code at checkout:
14-day money-back guarantee. Ends Monday 30 November at 23:59.