Using the Code Editor

Cosmos comes with the Monaco code editor, which is the code editing engine that powers Visual Studio Code. Monaco is the best online code editor on the planet!

Then we do one better--we add Emmet Notation to Monaco, which significantly increases developer productivity creating HTML code.

Getting Started

You can open a page in the code editor in one of three ways:

1) When using the editor, navigate to the pate you want to edit.  Then click on the “Edit” button.  Now click “Code Editor.”

2) From the Live Editor, choose “Menu” then “Code Editor.”

3) From the “Page Inventory” page, find the page. Then click on the blue code editor icon.

Three Tabs

When opening the Code Editor for a web page, you will see three tabs. “Head Block,” “Html Content,” and “Footer Block.”

Each tab injects content into different parts of the web page, as shown below:

Publishing a Page

While working on a web page you may notice the toolbar may say “DRAFT (not published)” and next to that a “Publish Now” button.

As you work, the page is not visible on your website because it is saving draft versions of your page.

There are two options for making your web page public.

Publish Now

To make a web page available immediately, click the “Publish Now” button.

This will save the web page right away, make it available immediately, and the “Publish Now” button will become the “Make Draft” button.

Publish in the future

If you want the page to be made available at a future date and time, click the area that says “Draft (not published)” on the toolbar.

This will bring up a calendar widget.

Use this tool to pick the day and the time you want the current page version to go live.

Note: This uses your local time.  If for your example, you are in the Pacific time zone, and you pick 8:30 AM, Cosmos automatically adjusts for global time zones.  So, in this case users in London will see the article at 12:30 AM (or 1:30 AM for daylight savings).