Access Code Preferences
Either press a CMD/CTRL + , shortcut or click on the avatar in the top right corner of your Avocode windows bar and select "App preferences".
Once the App Preferences launches, switch to the second tab called Code.
Adjust Code Preferences
Font size
You can change the size of code displayed in the Code panel (appears on the left in the Design View). Just type in a number of a desired font size.
Show/hide comments
if you don't want to have comments in the code output, you can show or hide them. If you decide to hide them, they won't be displayed or copied when you copy code from the Code panel.
Change code settings
First of all choose a code language you want to play with.
Then you can customize the code template by selecting (show/hide) or dragging the properties below to reorder them in the code output.
Advanced Code Settings
There are also Advanced Code Settings for these languages: CSS, Stylus, SCSS, Less, Sass, CSS in JS, and React Native. There are many things you can edit, just click on the ADVANCED SETTINGS next to the Code language drop down.
Here are a few examples of what you can adjust:
- CSS, CSS in JS, React Native: Change color format or unit
- CSS: Choose a selector type (class, id, element)
- CSS preprocessors: Change mixin libraries for Less (Less Hat), Sass (Compas, Bourbon), Stylus (Nib) and SCSS (Compas, Bourbon)
- Android: Wrap styles in a shape element or an item element
How to import/export variables?
To customize Avocode even more you can create variables or import a list of the ones that you'd like to use across the whole project.