Home/Documentation/Builder/Elements/Design Elements/

Syntax Highlighter Element

Last Update: February 19, 2023

The Syntax Highlighter Element is our solution to allow 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.. Read below for an overview of the specific features of the Element.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Syntax Highlighter Element

To start, add the element into your desired column.

To view the possibilities of this element, make sure you visit the Element Demo page. 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 a number of options to show or hide line numbers and to add the ability for the user to copy the code to the clipboard. The Design tab offers a number of styling options to further customize the element.

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

HeadingDescription
Code to HighlightEnter some code to be displayed with highlighted syntax.IMPORTANT: Please make sure that the "Code Block Encoding" setting in Global Options is enabled in order for the code to appear correctly on the frontend. Currently set to On.
Highlighter ThemeSelect which theme you want to use for code highlighting. Default currently set to Light 1.
Code LanguageSelect the language the code is in.
Line NumbersChoose if you want to display or hide line numbers. Default currently set to Yes.
Line WrappingControls whether the long line should break or add horizontal scroll. Default currently set to Scroll.
Copy to ClipboardChoose if you want to allow your visitors to easily copy your code with a click of the button. Default currently set to Yes.
Copy to Clipboard TextEnter text to be displayed for user to click to copy. Leave empty for default value of Copy to Clipboard.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Font SizeControls the font size of the syntax highlight code. In pixels. Default currently set to 14. Reset to default.Using default value.
Border SizeControls the border size of the syntax highlighter. In pixels. Default currently set to 1. Reset to default.Using default value.
Border ColorControls the border color. Leave empty for default value of Strong Dark Gray. Reset to default.Using default value.
Border StyleControls the border style. Default currently set to Solid.
Background ColorControls the background color for code highlight area. Leave empty for default value of White. Reset to default.Using default value.
Line Number Background ColorControls the line number background color for code highlight area. Leave empty for default value of White. Reset to default.Using default value.
Line Number Text ColorControls the line number text color for code highlight area. Leave empty for default value of Dark. Reset to default.Using default value.
MarginControl spacing around the syntax highlighter. In px, em or %, e.g. 10px. Leave empty for default value of 0px, 0px, 0px, 0px.

In this article