Syntax Highlighter Element
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.
How To Use The Syntax Highlighter Element
Step 1 – Create a new page or edit an existing one.
Step 2 – Add a container then select your desired column layout.
Step 3 – Click the ‘+ Element’ button to bring up the Elements window. Locate the ‘Syntax Highlighter’ element and click it to bring up its options window.
Step 4 – 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.
Step 5 – Once you have finished configuring the options, click ‘Save’ to insert the element into the page. Preview the page to view the code snippet, and remember you can come back into the element to fine tune it.
Location: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Syntax Highlighter Element section.
Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Separator Element
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.