Syntax Highlighter: Settings Overview

Updated on March 15, 2024 by Ananda
Table Of Content

The Plus Addons for Elementor’s Syntax highlighter widget allows users an easy way to customize Elementor code appearance. Take control of your code’s look on Elementor effortlessly.

With the Syntax Highlighter widget, you can highlight 25+ different coding Languages, it’s user-friendly and enhances your code’s presentation.

Required Setup

How to Activate the Syntax Highlighter Widget?

Go to 

  • The Plus Settings Plus widgets 
  • Search the widget name and turn on the toggle then click Save
Active syntax highlighter

Key Features

How to Add Syntax Highlighter in Elementor?

To use the Syntax Highlighter widget, add the widget on the page.

Source Code

From the Language dropdown, you can select from 25+ coding languages that you want to add in syntax highlighter.

Let’s select HTML Markup from the Language dropdown.

From the Theme dropdown, you can select from any eight different themes such as Default, Coy, and Dark etc.

Syntax highlighter demo styles

Here, we have selected Default theme.

In the Source Code field, you have to add the source code.

Then from the Alignment option, you can set the alignment of the code to left, right, or center.

Syntax highlighter cotnent syntax highlighter: settings overview from the plus addons for elementor

Options

From Options, you can add copy paste button, and a download button and highlight any specific line in syntax highlight.

Language Text – From here, you can add a button to display the language code in the syntax highlighter.

Copy Text – From here, you have the option to customize the name of the copy button

Copy Icon – From here, you have the option to customize the icon of the copy button.

Copied Text – From here, you can customize the name of the copied button that will be visible after clicking the copy button.

Copied Icon – From here, you have the option to customize the icon of the copied button that will be visible after clicking the copy button.

Copy Error Text – From here, you can customize the button text if there is any error in copying text.

Syntax highlighter options

Line Number – From here, you can enable the Line Number toggle, to add a numbers in the code.

Line Highlight – From here, you can specify the line numbers you wish to highlight in the Line Highlight field.

Download Button – From here, you have the option to add a download button for downloading code from the syntax highlighter.

Button Icon – From here, you can add an image to the download button.

How to Add HTML Code in Syntax Highlighter

From the Language dropdown, you have to select HTML Markup.

In the Source Code field, you have to add the source code.

Html code in syntax highlighter

How to Add Basic Language Code in Syntax Highlighter

From the Language dropdown, you have to select Basic it will show in text format.

In the Source Code field, you have to add the source code.

Basic language code in syntax highlighter

How to Add C Language Code in Syntax Highlighter

From the Language dropdown, you have to select C.

In the Source Code field, you have to add the source code.

C language code in syntax highlighter

How to Add C# Code in Syntax Highlighter

From the Language dropdown, you have to select C#.

In the Source Code field, you have to add the source code.

C# code in syntax highlighter

How to Add C++ Code in Syntax Highlighter

From the Language dropdown, you have to select CPP.

In the Source Code field, you have to add the source code.

C++ code in syntax highlighter

How to Add CSS Code in Syntax Highlighter

From the Language dropdown, you have to select CSS.

In the Source Code field, you have to add the source code.

Css code in syntax highlighter

How to Add CSS Extra Code in Syntax Highlighter

From the Language dropdown, you have to select CSS Extra.

Note:  CSS is the standard language for styling web pages, controlling layout, fonts, colors, and more and CSS Extra refers to advanced CSS techniques, frameworks, or libraries that enhance standard CSS capabilities.

In the Source Code field, you have to add the source code.

Css extra code in syntax highlighter

How to Add Gcode in Syntax Highlighter

From the Language dropdown, you have to select Gcode.

In the Source Code field, you have to add the source code.

Gcode in syntax highlighter

How to Add Git Code in Syntax Highlighter

From the Language dropdown, you have to select Git.

In the Source Code field, you have to add the source code.

Image 1 syntax highlighter: settings overview from the plus addons for elementor

How to Add HTTP Code in Syntax Highlighter

From the Language dropdown, you have to select Http.

In the Source Code field, you have to add the source code.

Html code in syntax highlighter

How to Add Java Code in Syntax Highlighter

From the Language dropdown, you have to select Java.

In the Source Code field, you have to add the source code.

Html code in syntax highlighter

How to Add Java Doc Code in Syntax Highlighter

From the Language dropdown, you have to select Java Doc.

In the Source Code field, you have to add the source code.

Java doc code in syntax highlighter

How to Add Java Doc-Like Code in Syntax Highlighter

From the Language dropdown, you have to select Java Doc-Like.

In the Source Code field, you have to add the source code.

Java doc-like code in syntax highlighter

How to Add Javascript Code in Syntax Highlighter

From the Language dropdown, you have to select Javascript.

In the Source Code field, you have to add the source code.

Javascript code in syntax highlighter

How to Add JSDoc Code in Syntax Highlighter

From the Language dropdown, you have to select JSDoc.

In the Source Code field, you have to add the source code.

Jsdoc code in syntax highlighter

How to Add JSExtra Code in Syntax Highlighter

From the Language dropdown, you have to select JS Extra.

In the Source Code field, you have to add the source code.

Jsextra code in syntax highlighter

How to Add JS Templates Code in Syntax Highlighter

From the Language dropdown, you have to select JS Template.

In the Source Code field, you have to add the source code.

Js templates code in syntax highlighter

How to Add JSON Code in Syntax Highlighter

From the Language dropdown, you have to select Json.

In the Source Code field, you have to add the source code.

Json code in syntax highlighter

How to Add JSONP Code in Syntax Highlighter

From the Language dropdown, you have to select Jsonp.

In the Source Code field, you have to add the source code.

Jsonp code in syntax highlighter

How to Add JSON5 Code in Syntax Highlighter

From the Language dropdown, you have to select Json5.

In the Source Code field, you have to add the source code.

Json5 code in syntax highlighter

How to Add Perl Code in Syntax Highlighter

From the Language dropdown, you have to select Perl.

In the Source Code field, you have to add the source code.

Perl code in syntax highlighter

How to Add PHP Code in Syntax Highlighter

From the Language dropdown, you have to select Php.

In the Source Code field, you have to add the source code.

Php code in syntax highlighter

How to Add PHPDoc in Syntax Highlighter

From the Language dropdown, you have to select Phpdoc.

In the Source Code field, you have to add the source code.

Phpdoc in syntax highlighter

How to Add PHP Extra in Syntax Highlighter

From the Language dropdown, you have to select Php Extra.

In the Source Code field, you have to add the source code.

Php extra in syntax highlighter

How to Add Pl/SQL in Syntax Highlighter

From the Language dropdown, you have to select PL/SQL.

In the Source Code field, you have to add the source code.

Plsql in syntax highlighter

How to Add Python in Syntax Highlighter

From the Language dropdown, you have to select Python.

In the Source Code field, you have to add the source code.

Python in syntax highlighter

How to Add React in Syntax Highlighter

From the Language dropdown, you have to select React.

In the Source Code field, you have to add the source code.

React in syntax highlighter

How to Add Ruby in Syntax Highlighter

From the Language dropdown, you have to select Ruby.

In the Source Code field, you have to add the source code.

Ruby in syntax highlighter

How to Add SAS in Syntax Highlighter

From the Language dropdown, you have to select Sas.

In the Source Code field, you have to add the source code.

Sas in syntax highlighter

How to Add SASS in Syntax Highlighter

From the Language dropdown, you have to select Sass.

In the Source Code field, you have to add the source code.

Sass in syntax highlighter

How to Add SCSS in Syntax Highlighter

From the Language dropdown, you have to select Scss.

In the Source Code field, you have to add the source code.

Scss in syntax highlighter

How to Add Scheme in Syntax Highlighter

From the Language dropdown, you have to select Scheme.

In the Source Code field, you have to add the source code.

Scheme in syntax highlighter

How to Add SQL in Syntax Highlighter

From the Language dropdown, you have to select SQL.

In the Source Code field, you have to add the source code.

Sql-in-syntax-highlighter

How to Add VB.Net in Syntax Highlighter

From the Language dropdown, you have to select VB.Net.

In the Source Code field, you have to add the source code.

Vb. Net in syntax highlighter

How to Add Visual Basic in Syntax Highlighter

From the Language dropdown, you have to select Visual Basic.

In the Source Code field, you have to add the source code.

Visual basic in syntax highlighter

How to Add Wiki in Syntax Highlighter

From the Language dropdown, you have to select Wiki.

In the Source Code field, you have to add the source code.

Wiki in syntax highlighter

How to Add XQuery in Syntax Highlighter

From the Language dropdown, you have to select Xquery.

In the Source Code field, you have to add the source code.

Xquery in syntax highlighter

How to Style Syntax Highlighter Widget?

To style the Syntax Highlighter, you’ll find all the options in the Style tab.

Source Code –  From here, you can manage the source code style. You can add margin, and padding and add the height of the syntax highlighter.

Style syntax highlighter

Line Number – From here, you can manage the line number style. You can change the number color and border color.

Line Highlight – From here, you can manage the highlighted line style. You can change the background type.

Language Text – From here, you can manage the language text style. You can add margins, and padding and change the text color.

Copy/Download Button – From here, you can manage the copy/download button style. You can change the close button size, and color, and add a hover effect.

Scrolling Bar – From here, you can add a scrolling bar in syntax highlighter.

Note: To use the Scrolling Bar option you must have to add the Height from source code option.

Advanced options remain common for all our widgets, you can explore all its options from here.

View Advanced tab tutorial.

Syntax highlighter demo
OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]



    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website
    X