Syntax Highlighter Element

08/08/2019

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.

Copy to Clipboard
View More Examples!

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.

Element Options

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.

General Tab

  • Code to Highlight – Enter some code to be displayed with highlighted syntax. IMPORTANT: Please make sure that the “Code Block Encoding” setting in Theme Options is enabled in order for the code to appear correctly on the frontend.

  • Highlighter Theme – Select which theme you want to use for code highlighting. Choose from Default, Light 1, Light 2, Dark 1, and Dark 2.

  • Code Language –  Select the language the code is in. Choose from bash, css, conf, diff, html, htm, http, javascript, json, jsx, less, md, patch, php, phtml, sass, scss, sql, svg, txt, xml, yaml, and yml.

  • 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 the user to click to copy. Leave empty for the default value of Copy to Clipboard.

  • Element Visibility – Allows you to control the Separator’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

  • CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.

View The Options Screen

Design Tab

  • Font Size – Controls the font size of the syntax highlight code.

  • Border Size – Controls the border size of the syntax highlighter. In pixels.

  • Border Color – Controls the border color. Leave empty for the default value.

  • Border Style – Controls the border style. Choose from Default, Solid, Dashed, or Dotted.

  • 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.

View The Options Screen

Global Options

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.

  • Highlighter Theme – Select which theme you want to use for code highlighting. Choose from Default, Light 1, Light 2, Dark 1, and Dark 2.

  • Line Numbers – Choose if you want to display or hide line numbers.

  • Line Numbers Background Color – Controls the line number background color for code highlight area.

  • Line Numbers Text Color – Controls the line number text color for code highlight area.

  • 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 a user to click to copy. Leave empty for the default value of Copy to Clipboard

  • Font Size – Controls the font size of the syntax highlight code.

  • Background Color – Controls the background color for code highlight area.

  • Border Size – Controls the border size of the syntax highlighter. In pixels.

  • Border Color – Controls the border color. Leave empty for the default value.

  • Border Style – Controls the border style. Choose from Default, Solid, Dashed, or Dotted.

  • Margins – Control spacing around the syntax highlighter. In px, em or %, e.g. 10px.

View The Options Screen

Syntax Highlighter Parameters

Copy to Clipboard
    • theme – Choose from default, elegant, hopscotch, or oceanic-next. Sets the theme you want to use for code highlighting.
    • language – Choose from x-sh, css, conf, diff, html, htm, http, javascript, json, jsx, x-less, md, patch, x-php, phtml, x-sass, x-scss, sql, svg, txt, xml, yaml, or yml. Sets the language the code is in.
    • line_numbers – Choose from default, yes, or no. Displays or hides the line numbers.
    • line_wrapping – Choose from default, scroll, or break. Sets whether the long line should break or add horizontal scroll.
    • copy_to_clipboard – Choose from default, yes, or no. Allows your visitors to easily copy your code with a click of the button.
    • copy_to_clipboard_text – Insert custom text to be displayed for user to click to copy. Leave empty for default value of “Copy to Clipboard”.
    • font_size – Accepts a pixel value. For example, 14px Sets the syntax highlight code’s font size.
    • border_size – Accepts a pixel value. For example, 1px. Sets the syntax highlighter’s border size.
    • border_color – Accepts a hexcode ( #000000 ) or RGB ( rgb(0,0,0) ). Sets the border color.
    • border_style – Choose from default, solid, dashed, or dotted. Sets the border style.
    • background_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the background color for code highlight area.
    • line_number_background_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the line number background color for code highlight area.
    • line_number_text_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the line number text color for code highlight area.
    • margin_top – Accepts a pixel value. For example, 5px. Sets the top margin of the syntax highlighter.
    • margin_left – Accepts a pixel value. For example, 5px. Sets the left margin of the syntax highlighter.
    • margin_bottom – Accepts a pixel value. For example, 5px. Sets the bottom margin of the syntax highlighter.
    • margin_right – Accepts a pixel value. For example, 5px. Sets the right margin of the syntax highlighter.
    • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
    • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

    • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.