Syntax Highlighter Element

Last Update: August 30, 2025

The Avada Syntax Highlighter Element allows you to provide code snippets in a variety of different languages in a copyable, embeddable format directly on your website. Aside from the 4 pre-set style options, it comes with several customization options to control all colours, borders, text, line wrapping, code copying, and more.

Watch the video below for a visual overview of the Element, view the Avada Syntax Highlighter Element page for live examples, and read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Live Example!

View Avada Builder Elements!

How To Use The Syntax Highlighter Element

To start, add the Avada Element to your desired column. The element has two tabs: General and Design. On the General tab, the first thing to do is to insert the code you wish to highlight. Directly below that, you can choose from any of the 4 preset style options for the snippet. Then select the coding language that the snippet is in (this assists with correct styling).

There are also several options to show or hide line numbers and to allow the user to copy the code to the clipboard. The Design tab offers styling options to customize the element further.

Element Options

Note: The Default setting will use the global settings assigned for this element in your Options > Avada Builder Elements > Syntax Highlighter Element section.

General

Heading		Description
Code to Highlight		Enter some code to be displayed with highlighted syntax.
Highlighter Theme		Select which theme you want to use for code highlighting.
Code Language		Select the language the code is in.
Line Numbers		Choose if you want to display or hide line numbers.
Line Wrapping		Controls whether the long line should break or add horizontal scroll.
Copy to Clipboard		Choose if you want to allow your visitors to easily copy your code with a click of the button.
Copy to Clipboard Text		Enter text to be displayed for user to click to copy.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Font Size		Controls the font size of the syntax highlight code. In pixels.
Border Size		Controls the border size of the syntax highlighter. In pixels.
Border Color		Controls the border color.
Border Style		Controls the border style.
Background Color		Controls the background color for code highlight area.
Line Number Background Color		Controls the line number background color for code highlight area.
Line Number Text Color		Controls the line number text color for code highlight area.
Margin		Control spacing around the syntax highlighter. In px, em or %, e.g. 10px.