NewNew in Beta: Website Preview in BreakUI Pro v2.0.22. Next up: Review Wall element.See updates →
Skip to main content
Developer

Syntax Code Highlighter for Breakdance

A code block with syntax highlighting, line numbers, a copy button and an automatic file name. Show code in tutorials and docs without another plugin.

5 styles Pro Native Breakdance element No library needed

5 ways to style it

1MidnightThe default dark theme.
Midnight
functions.php php
<?php
// Add a custom class to the body element.
add_filter( 'body_class', function ( $classes ) {
	$classes[] = 'has-breakui';
	return $classes;
} );
2LightFor light sites.
Light
functions.php php
<?php
// Add a custom class to the body element.
add_filter( 'body_class', function ( $classes ) {
	$classes[] = 'has-breakui';
	return $classes;
} );
3DraculaA popular dark theme.
Dracula
functions.php php
<?php
// Add a custom class to the body element.
add_filter( 'body_class', function ( $classes ) {
	$classes[] = 'has-breakui';
	return $classes;
} );
4SolarizedWarm and easy on the eyes.
Solarized
functions.php php
<?php
// Add a custom class to the body element.
add_filter( 'body_class', function ( $classes ) {
	$classes[] = 'has-breakui';
	return $classes;
} );
5NordCool and calm.
Nord
functions.php php
<?php
// Add a custom class to the body element.
add_filter( 'body_class', function ( $classes ) {
	$classes[] = 'has-breakui';
	return $classes;
} );

In the editor

Syntax Code Highlighter element Content tab in the Breakdance editor
1 Content tab
Syntax Code Highlighter element Design tab in the Breakdance editor
2 Design tab
How to use it

Three steps to your first Code Highlighter.

1

Add the element

Add Code Highlighter from the BreakUI Pro group on your tutorial or docs page.

2

Paste your code

Paste the snippet and pick the language. The file name fills in for you, so CSS shows style.css, and you can rename it or type your own.

3

Choose the look

Switch on line numbers, highlights and the copy button, and pick a light or dark theme.

Quick answers.

Common questions about Code Highlighter.

Still have a question?

Ask me directly on WhatsApp.

Chat on WhatsApp

Which languages are supported?

Dozens, including PHP, JavaScript, CSS, HTML, Python and JSON. The language can be detected for you.

Is there a copy button?

Yes, with one click copy that you can switch on or off.

Can I change the file name?

Yes. It is set from the language, so CSS shows style.css. Rename it and the extension is added for you, type any custom name, or hide it.

Does it load on every page?

No. The script and styles load only on pages that use the element.

Is it included in BreakUI Pro?

Yes. It is one of the 8 elements in BreakUI Pro, $29 for unlimited sites.

Get BreakUI Pro for $29.

Install it in a minute and have your first element on the page before your coffee cools.

$29, unlimited sites

Version 2.0.22, 714 KB

  • 8 elements, more on the roadmap
  • One license, unlimited sites and client sites
Get it for $29

See it live

Moniruzzaman Monir

Hire Monir

Available for new projects
What do you need?
Prefer to talk? Book a 30-min call