The Chrome extension to change the style of your custom code in Webflow and validate it directly in the tool without publishing it first!
Webflow is a great no-code tool for creating custom websites. The tool offers a wide range of native features to develop professional projects. However, if you want to use an "advanced" feature, you may have to code a bit. Webflow has options to add custom code to its project, but there are some limitations to its code editor.
In our article, we will talk about an extension that allows you to change the theme of your code and validate it directly in the Webflow tool!
Adding custom code in Webflow
In Webflow, you can add :
- Dans la balise <!-- fs-richtext-ignore --><head> du projet (via les paramètres généraux du projet)
- Dans la balise <!-- fs-richtext-ignore --><head> de vos pages (via les paramètres de vos pages)
- Avant la fermeture de la balise <!-- fs-richtext-ignore --><body> de vos pages (via les paramètres de vos pages)
- Avant la fermeture de la balise <!-- fs-richtext-ignore --><body> du projet (via les paramètres généraux du projet)
- Directly in your page (with an "embed" element)
The disadvantages of the Webflow code editor
There are two "negative" points about Webflow custom code:
- Webflow does not validate your code directly in the tool (there is a message "Custom code is not validated. Incorrect code may cause problems with the published page." when adding custom code in the code editor). Errors are not detected (for example missing syntax).
- You can't change the theme of the code (customizing the colors of the code to better identify functions, variables, tags, etc.)
These two points can be restrictive if you want to optimize your development. Indeed, a code error can happen quickly. Of course the console can help us to identify errors, but this means publishing our project, inspecting the page, detecting our error, coming back to the project, correcting it, etc., etc.
The Code Pro For Webflow extension
Fortunately, the Webflow agency Vconnectdots has understood this problem and solves these constraints with their Code Pro For Webflow extension. Thanks to this chrome extension, it is possible tooptimize and customize the Webflow code editor.
The extension allows to:
- Validate the code
- Add themes to the Webflow code editor
Validation of Webflow code
Code validation in Webflow is a challenge for web developers. Webflow does not validate custom code, which can cause problems for developers. Code Pro For Webflow validates HTML, CSS and JavaScript code.
If there is a syntax problem or other error, a small icon will appear next to the line that is causing the problem. If the error is critical, then the icon is a red circle with a cross inside, otherwise we have a yellow warning icon.
By hovering over the icon, we can have details about the problem, the error there is.
You can also choose to check or uncheck the validation option for the code.
Adding themes to the Webflow code editor
As far as the Webflow code editor is concerned, there are no theme options available yet. Developers often prefer to code on a dark background for better syntax highlighting and clearer visual distinction between different code elements. However, there are no themes available in Webflow yet.
With Code Pro For Webflow, we can choose between 15 different themes (3024 Night, Ambiance, Base16 Dark, Base 16 Light, etc.). To choose a theme, just click on the "Change Theme" button above the code editor.
This extension for Webflow allows you to save a lot of time and optimize the addition of custom code in your project. To improve even more your productivity in Webflow, don't hesitate to discover the Top 5 Webflow extensions to have!
Also find out how to use ChatGPT to easily add code to your project!
.jpg)
