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 settings". 

Once the App Preferences launches, switch to the second tab called Inspect.

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.

Change code settings

First of all choose a code language you want to adjust.

Then you can customise the code template by selecting 'Template settings' and selecting properties you want. You can also drag the properties 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.

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.

Did this answer your question?