---
title: "How to Add Download Button in Syntax/Code Highlighter in Elementor?"
url: https://theplusaddons.com/docs/add-download-button-in-code-highlighter-in-elementor/
date: 2024-03-15
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "The Download Button lets visitors save the displayed code as a file, instead of only copying it to the clipboard. It is a single switch on the Options section, alongside..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/Code-Highlighter-in-Elementor_-1024x536.jpg
word_count: 230
---

# How to Add Download Button in Syntax/Code Highlighter in Elementor?

The Download Button lets visitors save the displayed code as a file, instead of only copying it to the clipboard.

It is a single switch on the Options section, alongside the widget's separate Copy button.

***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 - see the Settings Overview doc for detail.

## Steps

- Add a Syntax Highlighter widget and open its **Options** section.- Turn on **Download Button**.- Set the button's **Text** (default "Download") and **Icon**.- Set **Link** if the button should download a specific file, rather than the code text itself.- Publish and check the front end.

![The Download Button switch and its Text/Icon/Link sub-fields](https://theplusaddons.com/wp-content/uploads/2026/09/tp-syntax-highlighter-download-button-wide.webp)

## Limitations

- What the button actually downloads when Link is left empty (a generated text file of the code, versus nothing) was not independently confirmed on the front end this session - only the control's existence and default (off) were confirmed via a fresh control extraction.

## Troubleshooting

### The button does not appear

Confirm Download Button is switched to on - it is off by default, separate from the widget's own Copy button, which is always shown.

## Related Docs

- [Syntax Highlighter: Settings Overview](https://theplusaddons.com/docs/syntax-highlighter-settings-overview/)- [Highlight a Specific Line](https://theplusaddons.com/docs/highlight-any-specific-line-in-syntax-highlight-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before adding a download button to the Syntax Highlighter in Elementor?**
A: The Syntax Highlighter widget has to be available in The Plus Addons for Elementor Free plugin, and it must be switched on under The Plus Addons > Widgets. The page also notes that the widget is part of The Plus Addons for Elementor by POSIMYTH, so the addon itself needs to be installed and activated first. That matters because the Download Button is just a control inside that widget, not a separate feature.

**Q: How do I make the code block download as a file instead of only copying it?**
A: The Download Button is controlled from the Syntax Highlighter widget’s Options section. Turning it on adds a separate download action next to the Copy button, so visitors can save the displayed code as a file instead of only copying it to the clipboard. The button also has its own Text and Icon settings, which lets you make the action clearer on the front end.

**Q: Can I change what file gets downloaded from the Syntax Highlighter?**
A: A Link field is available for the Download Button, and that is what you use when you want the button to download a specific file rather than the code text itself. That gives you a different outcome from the default code-download behavior. If you leave Link empty, the page does not confirm the exact front-end result in this session, so the safe assumption is to set Link when you need a specific file target.

**Q: Why is my download button not showing in Elementor?**
A: The most likely cause is that Download Button is still switched off. It is off by default and sits separately from the widget’s Copy button, which is always shown. In practice, that means you can have Syntax Highlighter working normally while still missing the download control if that single switch was never enabled in Options.

**Q: Does the Syntax Highlighter download button work without replacing the copy button?**
A: The two controls are separate, so enabling Download Button does not remove or replace Copy. The page explicitly says the Copy button is separate and always shown, while Download Button is an additional switch in Options. That setup is useful when you want both behaviors on one code block: quick clipboard copying for developers and a file download for visitors who want to keep the snippet.

**Q: What should I check if I want to style or troubleshoot this feature later?**
A: The most useful follow-up docs are [Syntax Highlighter: Settings Overview](https://theplusaddons.com/docs/syntax-highlighter-settings-overview/) and [Highlight a Specific Line](https://theplusaddons.com/docs/highlight-any-specific-line-in-syntax-highlight-in-elementor/). Those related docs point to broader widget settings and line-highlighting behavior, which helps when you are tuning how the code block looks after adding Download Button. That matters because download behavior sits inside a larger Syntax Highlighter setup, not in isolation.