Access Code Preferences

Either press a CMD/CTRL + , shortcut or click on “Avocode” in the top right corner of your Avocode windows bar and select "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 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 use variables?

Did this answer your question?