---
title: "Syntax Highlighter: Settings Overview"
url: https://theplusaddons.com/docs/syntax-highlighter-settings-overview/
date: 2024-03-15
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "Syntax Highlighter displays a block of code with language-aware colour highlighting, using Prism.js under the hood. This is the settings reference; see the other Syntax Highlighter docs for line highlighting..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/Syntax-Highlighter_-Settings-Overview-1024x536.jpg
word_count: 361
---

# Syntax Highlighter: Settings Overview

## 

- Syntax Highlighter displays a block of code with language-aware colour highlighting using Prism.js under the hood.
- The Plus Addons for Elementor Free plugin includes Syntax Highlighter, and the widget is enabled under The Plus Addons > Widgets.
- Syntax Highlighter is deprecated on the live Widgets screen, still works on existing pages, and is not being developed further.

Syntax Highlighter displays a block of code with language-aware colour highlighting, using Prism.js under the hood.

This is the settings reference; see the other Syntax Highlighter docs for line highlighting and the download button specifically.

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.***

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

## Before You Start

- **Edition:** **Free** — Syntax Highlighter ships in The Plus Addons for Elementor Free plugin.- **Widget to enable:** Syntax Highlighter, switched on under **The Plus Addons > Widgets**.- **Deprecated:** confirmed on the live Widgets screen (The Plus Addons > Widgets, Essential category) - the widget card carries a **DEPRECATED** badge. It still works if you already have it on a page, but it is not being developed further; avoid building new pages around it.

## Content Tab

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Language | The programming language Prism.js highlights the code as. | Markup (HTML) |
| Theme | The colour theme applied to the highlighted code. | Prism Default |
| Source Code | The actual code to display. | Sample welcome message |
| Alignment | Text alignment inside the code block. | Left |

![The Language control on the widget's Content tab](https://theplusaddons.com/wp-content/uploads/2026/09/tp-syntax-highlighter-language-wide.webp)

## Options

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Language Text | A label shown identifying the language, e.g. "HTML". | Empty |
| Line Number | Show line numbers down the left edge. | Off |
| Line Highlight | A text field naming which line number(s) to tint (see the dedicated doc). | Empty |
| Download Button | Show a button that downloads the code as a file. | Off |
| Copy Text / Copied Text / Copy Error Text | The button's three label states. | Copy / Copied! / Error |

![The Download Button switch on the widget's Options section](https://theplusaddons.com/wp-content/uploads/2026/09/tp-syntax-highlighter-download-button-wide.webp)

## How It Behaves

Not independently re-tested on a rendered front-end page this session - the highlighting itself (Prism.js colouring the configured language/theme) was not watched running. Every control name, type and default above is taken from a fresh live control extraction (not the old doc's wording, and not memory).

## Limitations

- The widget is deprecated (see Before You Start) - the panel and admin screen both flag this, and no replacement widget is named.- The actual highlighting render and the Copy/Download button's runtime behaviour were not independently observed on the front end this session.

## Troubleshooting

### The code does not appear highlighted

Confirm the widget is enabled at The Plus Addons > Widgets, and that the Language setting actually matches the language of the code you pasted in.

## Related Docs

- [Highlight a Specific Line](https://theplusaddons.com/docs/highlight-any-specific-line-in-syntax-highlight-in-elementor/)- [Add a Download Button](https://theplusaddons.com/docs/add-download-button-in-code-highlighter-in-elementor/)

## Frequently Asked Questions

**Q: Why isn’t the code highlighting showing up in Syntax Highlighter?**
A: The first thing to check is whether the widget is enabled under The Plus Addons > Widgets, because the page says the code only highlights when the widget is switched on. The other common failure point is the Language setting: Prism.js highlights based on the language you pick, so a mismatch with the pasted code can make the result look wrong or unstyled. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this widget as part of its Free plugin.

**Q: Is Syntax Highlighter still a good choice for new pages?**
A: It works for existing pages, but the widget is marked deprecated on the live Widgets screen and the page says it is not being developed further. That makes it a poor choice for new builds if you want something you can keep extending later. The practical takeaway is to use it only where it already exists, and avoid planning new layouts around it. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH still includes it in the Free plugin.

**Q: What does Syntax Highlighter actually do on a page?**
A: It displays a block of code with language-aware colour highlighting, and it uses Prism.js under the hood. That matters because the visual result depends on both the selected language and the theme, not just on pasting code into a box. In practice, this is meant for readable code snippets inside Elementor rather than plain text blocks. The page also notes that line highlighting and download behavior are covered in separate docs.

**Q: Can I add line numbers or a download button to highlighted code?**
A: Those are built into the widget as optional controls. Line Number shows numbers down the left edge, while Download Button adds a file download action for the code block. The page also points to separate docs for [Highlight a Specific Line](https://theplusaddons.com/docs/highlight-any-specific-line-in-syntax-highlight-in-elementor/) and [Add a Download Button](https://theplusaddons.com/docs/add-download-button-in-code-highlighter-in-elementor/), which suggests those features are handled as distinct behaviors rather than part of basic highlighting.

**Q: What’s included in Syntax Highlighter by default?**
A: The defaults are pretty minimal: Language is set to Markup (HTML), Theme uses Prism Default, Source Code starts with Sample welcome message, and Alignment is Left. In Options, Default Language Text is empty, Line Number is Off, Line Highlight is empty, Download Button is Off, and Copy Text / Copied Text / Copy Error Text defaults to Copy / Copied! / Error. That setup favors a simple starter snippet over a heavily customized code panel.