---
title: "Syntax Highlighter: Settings Overview"
url: https://theplusaddons.com/docs/syntax-highlighter-settings-overview/
date: 2024-03-15
modified: 2026-04-09
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/Syntax-Highlighter_-Settings-Overview-1024x536.jpg
word_count: 1819
---

# Syntax Highlighter: Settings Overview

## Key Takeaways

- The Plus Addons for Elementoru2019s Syntax Highlighter widget supports 25+ coding languages.
- The Syntax Highlighter widget includes multiple code themes for customization.
- Users can add a copy paste button and a download button in the Syntax Highlighter.
- Specific line highlighting is available in the Syntax Highlighter widget.
- The widget allows alignment settings for code display, including left, right, or center.

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.

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-syntax-highlighter/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Required Setup

- [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor.](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text)

- Make sure the Syntax Highlighter widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Syntax Highlighter and activate.

## How to Activate the Syntax Highlighter Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle**.**
**

![](https://theplusaddons.com/wp-content/uploads/2024/03/syntax-highlighter-1024x359.png)

## Key Features

- **Supports 25+ Coding Languages **- You can easily add 25+ different coding languages in syntax highlighter.

- **Multiple Code Themes **- You can add different code themes to show code.

- **Copy Paste Button** - You can add copy paste button in syntax highlighter.

- **Download Button** - You can [add a download button in syntax highlighter.](https://theplusaddons.com/docs//add-download-button-in-code-highlighter-in-elementor/)

- **Specific Line Highlight **- You can [highlight any specific line in the syntax highlighter.](https://theplusaddons.com/docs//highlight-any-specific-line-in-syntax-highlight-in-elementor/)

## 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](https://theplusaddons.com/wp-content/uploads/2024/03/Syntax-Highlighter-Demo-Styles-1024x635.png)

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.

![](https://theplusaddons.com/wp-content/uploads/2024/03/Syntax-Highlighter-Cotnent.gif)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/Syntax-Highlighter-Options.png)

**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](https://theplusaddons.com/wp-content/uploads/2024/03/HTML-Code-in-Syntax-Highlighter-1024x492.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/Basic-Language-Code-in-Syntax-Highlighter-1024x493.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/C-Language-Code-in-Syntax-Highlighter-1024x496.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/C-Code-in-Syntax-Highlighter-1-1024x493.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/C-Code-in-Syntax-Highlighter-3-1024x490.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/CSS-Code-in-Syntax-Highlighter-1024x488.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/CSS-Extra-Code-in-Syntax-Highlighter-1024x486.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/Gcode-in-Syntax-Highlighter-1024x493.png)

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

![](https://theplusaddons.com/wp-content/uploads/2024/03/image-1-1024x488.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/HTML-Code-in-Syntax-Highlighter-1-1024x492.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/Java-Code-in-Syntax-Highlighter-1024x491.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/Java-Doc-Code-in-Syntax-Highlighter-1024x484.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/Java-Doc-Like-Code-in-Syntax-Highlighter-1024x486.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/Javascript-Code-in-Syntax-Highlighter-1024x488.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/JSDoc-Code-in-Syntax-Highlighter-1024x482.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/JSExtra-Code-in-Syntax-Highlighter-1024x491.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/JS-Templates-Code-in-Syntax-Highlighter-1024x481.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/JSON-Code-in-Syntax-Highlighter-1-1024x478.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/JSONP-Code-in-Syntax-Highlighter-1024x486.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/JSON5-Code-in-Syntax-Highlighter-1-1024x490.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/Perl-Code-in-Syntax-Highlighter-1024x485.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/PHP-Code-in-Syntax-Highlighter-1024x492.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/PHPDoc-in-Syntax-Highlighter-1024x485.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/PHP-Extra-in-Syntax-Highlighter-1024x486.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/PlSQL-in-Syntax-Highlighter-1024x465.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/Add-Python-in-Syntax-Highlighter-1024x465.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/React-in-Syntax-Highlighter-1024x495.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/Ruby-in-Syntax-Highlighter-1024x493.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/SAS-in-Syntax-Highlighter-1024x476.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/SASS-in-Syntax-Highlighter-1024x496.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/SCSS-in-Syntax-Highlighter-1024x486.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/Scheme-in-Syntax-Highlighter-1024x491.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/SQL-in-Syntax-Highlighter-1024x484.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/VB.Net-in-Syntax-Highlighter-1024x488.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/Visual-Basic-in-Syntax-Highlighter-1024x493.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/Wiki-in-Syntax-Highlighter-1024x486.png)

### 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](https://theplusaddons.com/wp-content/uploads/2024/03/XQuery-in-Syntax-Highlighter-1024x490.png)

## 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](https://theplusaddons.com/wp-content/uploads/2024/03/Style-Syntax-Highlighter.png)

**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.](https://docs.posimyth.com/tpae/advanced-tab/)

![Syntax Highlighter Demo](https://theplusaddons.com/wp-content/uploads/2024/03/Syntax-Highlighter-Demo.png)

## Frequently Asked Questions

**Q: What are the key features of the Syntax Highlighter widget?**
A: The Syntax Highlighter widget supports over 25 coding languages and allows users to customize the appearance of their code. Key features include multiple code themes, a copy-paste button, a download button, and the ability to highlight specific lines in the code. This flexibility enhances code presentation, making it easier to read and share.

**Q: How do I activate the Syntax Highlighter widget in Elementor?**
A: To activate the Syntax Highlighter widget, navigate to The Plus Addons u2192 Widgets in your Elementor dashboard. Search for the Syntax Highlighter widget and turn on the toggle. This step is essential to ensure the widget is available for use on your pages.

**Q: What common mistakes do users make when setting up the Syntax Highlighter?**
A: A common mistake is not activating the Syntax Highlighter widget after installation. Users may overlook this step, which prevents the widget from appearing in Elementor. Always ensure that the widget is activated in The Plus Addons u2192 Widgets section before trying to use it.

**Q: What settings work best for displaying code in the Syntax Highlighter?**
A: For optimal display, choose a code theme that contrasts well with your website's background. Additionally, enabling line numbers can improve readability, especially for longer code snippets. Adjusting the alignment to center can also enhance the visual appeal of the code block.