Breakdance4fun Logo

Supa Code Block - an advanced Code Block element for Breakdance

The SUPA Code Block element serves the same purpose as the built-in Code Block element, but offers more options.

This element is available in the FREE plugin: Asset4Breakdance

 

Table Of Contents

PHP & HTML Code

In the Code Block element, we have a unique text area for typing HTML and/or PHP. It executes a server-side request each time we start typing in the box. While this is fine for typing PHP, it quickly becomes annoying when we only want to add some plain HTML.

The Supa Code Block element has two boxes: HTML, where we can type HTML code without the server request; and a PHP control, which works just like the PHP/HTML one from the Code Block.

Supa Code Block

Supacodeblock Phphtml

Code Block

Codeblock Content Settings

Dependencies

You can choose which dependencies to load, without worrying about whether they're already loaded or not. And if a dependency is already being used by another element, it won't be loaded twice (that's how dependencies work).

It's very convenient when you want, for example, type some GSAP code.

Supacodeblock Dependencies Options
Supacodeblock Gsap

Default CSS

The Supa Code Block only keeps the max-width CSS property as the default CSS. No more flex stuff that we need to overwrite.

Code Block

Codeblock Default Css

Supa Code Block

Supacodeblock Default Css

Design options

The Display CSS property has been added to Design options, making it easier to set the display to block, flex, or grid.

Supa Code Block

Supacodeblock Design

Code Block

Codeblock Design