BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Free widget

Code Block Widget for Elementor Free

Show code with syntax colors and a copy button.

Overview

What Code Block does

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.

Live demo

See it in action

functions.php PHP
<?php
// Say hello to the visitor.
function bright_hello( $name ) {
	return 'Hello, ' . esc_html( $name ) . '!';
}

echo bright_hello( 'world' );
Features

What it can do

  • Syntax colors for 25 languages, from HTML, CSS and JavaScript to PHP, Python and SQL.

  • Line numbers with your own first number.

  • Highlight chosen lines or ranges, such as 5-7.

  • File name and language in a top bar.

  • Copy button with your own text.

  • Wrap long lines or scroll sideways.

  • Dark or light theme, and 12 colors you can change.

  • Max height with scrolling inside the box.

Use cases

When to use it

Tutorials

Show the snippet readers need to paste, with a copy button.

Documentation

Show config files with the file name in the top bar.

Changelogs

Use the Diff language to show added and removed lines.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag the Code Block widget onto the page.

  2. In Code, choose the Language and paste the Code.

  3. Type a File Name and keep Line Numbers on.

  4. Add Highlight Lines if you want to mark lines.

  5. Keep Copy Button on.

  6. In the Style tab, choose the Color Theme and Max Height.

FAQ

Questions and answers

Which languages are supported?

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.

Is the code run on my site?

No. It is shown exactly as typed and never run.

Can I mark important lines?

Yes. Type the line numbers or ranges in Highlight Lines.

Free forever

Code Block is free

It is one of 48 widgets in the free Bright Addons plugin. Each widget loads its code only on pages that use it.