# \[New Plugin\] 🖥️ Advanced Code Editor + | Dark-mode Compatible | Easily embed a lightweight code editor into your app (10+ Languages & 11+ Themes available)

**URL:** <https://forum.bubble.io/t/new-plugin-advanced-code-editor-dark-mode-compatible-easily-embed-a-lightweight-code-editor-into-your-app-10-languages-11-themes-available/219657>\
**Category:** Showcase\
**Created:** [August 12, 2022, 12:51am UTC](https://forum.bubble.io/t/new-plugin-advanced-code-editor-dark-mode-compatible-easily-embed-a-lightweight-code-editor-into-your-app-10-languages-11-themes-available/219657 "2022-08-12T00:51:35Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![wesleywsls](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/wesleywsls/32/204621_2.png) [@wesleywsls](https://forum.bubble.io/u/wesleywsls)\
**Post date:** [August 12, 2022, 12:51am UTC](https://forum.bubble.io/t/new-plugin-advanced-code-editor-dark-mode-compatible-easily-embed-a-lightweight-code-editor-into-your-app-10-languages-11-themes-available/219657/1 "2022-08-12T00:51:35Z")

</div>

Hi all! 👋

🆕 I just released a new plugin called “Advanced Code Editor+”.

> Add an ultra-customizable, dark-mode compatible and +10 languages Code Editor into your app in just a click.  
> Based on the world’s most popular and reliable Embed Code Editor “Ace.js” library.

### 👉 Links

[🔗 Demo / Preview](https://weswas.bubbleapps.io/version-test/advanced-code-editor/1656851519338x226131024613559940)  
[🔗 Bubble Editor](https://bubble.io/page?type=page&name=advanced-code-editor&id=weswas&tab=tabs-1)

### ❓ What’s inside ?

The 10 most popular languages are currently supported :

- HTML
- CSS
- Java
- Javascript
- SCSS
- SQL
- Python
- C/C++
- R
- JSON

You’ll also find 11 themes with different colors & ambiances.

You can see a screenshot here, with theme Dracula :

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/3/e/3ec5b815783e7ed87b770df33fa3e4f83d1e2580.png)

### ❓ How to use it ?

It is very easy to set-up.  
Just drag the “Advanced Code Editor” element on your page, and define the settings you’d like.  
You may want to define :

- Current Language
- Current Theme
- Highlight active line ?
- Font-size
- Read-only mode

### ❓ What actions can I trigger from this Editor ?

There are 6 actions you may want to trigger.

- Download Current File (instantly download the file that is currently being edited with the corresponding file extension). You may define the name of the downloaded file in the Action field.
- Set Language of the Editor
- Set Theme of the Editor
- Set Font-size of the Editor
- Set Read-only mode for the Editor
- Set Value for the Editor

### ❓ What Custom States could I retrieve from this Element ?

You have access to 7 Custom States that should help you creating a smooth integration between your app and this Code Editor.

- Current Theme
- Current Language
- Current Language Extension
- Current Value
- Current Cursor Row
- Current Cursor Column
- Read-only mode

### ❓ Could you add a language or a specific theme for me ?

For sure !  
Please feel free to ask if you’d like the editor to support a new language or theme.  
It will be added within 1 business-day.  
Also, if you would like a new feature inside this plugin, please tell me by answering this thread or emailing me at [wesley.wasielewski@hotmail.fr](mailto:wesley.wasielewski@hotmail.fr)

Best,  
Wes

---

<div class="post-metadata">

**Author:** ![wesleywsls](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/wesleywsls/32/204621_2.png) [@wesleywsls](https://forum.bubble.io/u/wesleywsls)\
**Post date:** [August 12, 2022, 3:38am UTC](https://forum.bubble.io/t/new-plugin-advanced-code-editor-dark-mode-compatible-easily-embed-a-lightweight-code-editor-into-your-app-10-languages-11-themes-available/219657/2 "2022-08-12T03:38:14Z")

</div>

New update 12/08/2022 :

- Just added an action to entirely Reset the Data of an Editor.  
It is called “Reset Data an Advanced Code Editor”.

Hope you’ll like it!  
Wes 🙂