Blocs comes with a built in code editor that lets you edit and input code into various areas of a project.
Please note. The code editor that comes with Blocs does not let you edit the entire contents of a page. Its purpose is to grant access to areas of a page so that custom code can be inputed and used in the final export.
Opening the Code Editor
You can access the Code Editor within Blocs, by double clicking on a Code Widget, via the main menu Window > Code Editor or with the keyboard shortcut ⌥+⌘+C.
Code Input Zones
As well as the individual zones added with Code Widgets there are nine additional code zones that you can input custom code into using the Code Editor. Four zones that are global (appear on every page), four zones that are page specific and a zone that enables adding additional CSS to the main style.css style sheet. The target input zone can be selected using the drop down menu located in the top left corner of the Code Editor window.
You can quickly cycle through the code input zones using the keyboard shortcut ⌃ + ⇥ to move to the next input zone and ⌃ + ⇧ + ⇥ to move backwards to the previous input zone.
Tidy Contents
When the Code Editor input zone is set to additional CSS, Blocs will display a small button in the bottom right corner of the code input area. Clicking this button will tidy (Beautify) the CSS code formatting.
Code Editor Settings
It’s possible to set the typeface and font size for the Blocs code editor via the main Blocs preferences. To access these options, navigate to the main preferences by selecting Blocs > Preferences from the apps main menu. The code options can be found under the tab labelled code.
