Syntax Highlighter

< All Topics
Widget Used
Syntax Highlighter
Demo URL
Click Here
Tutorial Videos
Official Video

If you want to build any programming language code editor then use it as a highlighter on your content for your website/product. Then we have created a dominant and well-designed widget. Our widget simplifies this process by providing different types of language and themes which make the better layout. With the help, you can display code syntax with highlighting and download it too.

Table Of Contents
Pro tip
Why don’t you use this widget? Because with the help of this widget, You will be used to code editor in your website and sometimes even if you want to use code syntax in the article, you can do it with the custom theme option.

How to use the Syntax Highlighter Widget of The Plus Addons For Elementor

The Syntax Highlighter widget comes with some different types of programming languages and eight themes options. With the custom styling options, you can make an acceptable and appropriate layout.

General Steps

Search for the Syntax Highlighter element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Syntax Highlighter widget. First, click on the Content tab.

1. Content

1) Source Code

Language

We have given some types of programming languages for source code. Select your desired type for the source code.

You can use type languages to create their according-to-code syntax and create different layouts.

Example : HTML Markup, C, CSS, JAVA, JSON, PHP, SQL, ETC…

Theme

We have given eight options of themes for the source code. Select your desired option for the source code.

You can set the syntax background of the selected language code using the different options of the themes.

The options we provided are:

1. Default
2. Coy
3. Dark
4. Funky
5. Okaidia
6. Solarized Light
7. Tomorrow
8. Twilight

Source Code

You can use this option as a code editor and put the code syntax according to the selected language.

Alignment

You can set code syntax alignment left, center, and right.

2) Options

Language Text

You can set a selected language name.

Copy Text

You can set the copy button text.

Copy Icon

You can set the copy button icon.

Copied Text

You can set the copied button text.

Copied Icon

You can set the copied button icon.

Copy Error Text

You can set the copy error button text.

Line Number

By enabling this option you can see how many numbers of line codes have been written.

Line Highlight

If you want to highlight the code syntax of the selected language, you can use this option to write the line number separated by a comma.

Example : 1, 2, 3, 4-15

Download Button

By enabling this option you can see the download button.

Button Text

You can set the download button text.

Button Icon

You can set the download button icon.

Link

You can set the link of the URL which you have opened as a click event on the download button.

2. Style

The Style tab is used for customizing the look of all the Syntax Highlighter widget components such as Source Code, Line Number, Line Highlight, Language Text, Copy/Download Button and Scrolling Bar.

Source Code Style

Set Margin, Padding and Height for the Source Code.

Line Number Style

Set Number Color and Border for the Line Number.

Line Highlight Style

Set Background for the Line Highlight.

Language Text Style

Set Padding, Margin, Typography, Text Color, Background, Border, Border Radius and Box Shadow for the Language Text.

Copy/Download Button Style

Set Padding, Margin, Typography, Icon Size, Text Color, Icon Color, Background, Border, Border Radius and Box Shadow for the Copy/Download Button.

Scrolling Bar Style

Set Width and Height for the Scroll Bar.
Set Background, Border Radius, and Box Shadow for the Thumb.
Set Background, Border Radius, and Box Shadow for the Track.

Preview

Here you can see with details how the Style option of the Syntax Highlighter Widget works.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?