Features

The Mobius CSS and HTML Editors are designed for power, flexibility, and efficiency. Compose your code with fluid ease, thanks to many thoughtfully designed features.

Code types

Use the Mobius Editors to add global CSS and HTML to your WordPress site. You can also write custom jQuery and JavaScript in the HTML Editor.

Access

Access the Mobius Editors by clicking the Mobius Toggle button [IMAGE] at the bottom right corner of any page.

Table of Comments

Navigate within your code with ease. When you use our special comment syntax, Mobius generates a table from your comments. We call this the Table of Comments (ToC), which you can use just like a Table of Contents. Click on items in the ToC to navigate to a specific comment's location in your code.

To use the special comment syntax, add one extra asterisk (CSS) or dash (HTML) to the regular CSS or HTML comment syntax. You can use two extra asterisks (CSS) or dashes (HTML) to set the comment text at a heading level.

CSS Example


	/***
Typography
***/

/**
Font Faces
**/
@font-face {
  font-family: 'Arial, sans-serif';
...

Click the [IMAGE OF ToC ICON] icon at the top right corner of the CSS Editor to show the generated Table of Comments:

HTML Example

[Screenshot of how the ToC looks from this example - the HTML Editor ToC is not working so I couldn't generate a screenshot yet.]

Formatting code

Mobius beautifies your HTML and CSS with the Prettier code formatter whenever you save your changes (via the Save button or Cmd (Mac) | Ctrl (PC) + S). Let it handle the formatting so you can focus on writing the code.

To format without saving, use Cmd (Mac) | Ctrl (PC) + B. Remember that B is for beautify!

Abbreviations

Emmet abbreviations

Do more with less—typing, that is. Use the Emmet abbreviations you know and love, built natively into Mobius. We're in good company: VS Code, Sublime, Atom, and other popular code editors have also integrated Emmet.

Examples

With Emmet, you can write an HTML abbreviation like this:
div#header+div.page+div#footer.class1.class2

When you press Tab at the end of this line, Emmet expands that abbreviation to this:





In the above example, the abbreviation is 44 characters; the expanded code is 94. That means Emmet saved you from typing more than half the keystrokes.

You can also use Emmet with CSS. Here's a 9-character example written inside a CSS rule:
m10p30e5x

When you press Tab, that abbreviation expands to these 21 characters, once again saving you more than half the keystrokes:
margin: 10% 30em 5ex;

Visit the Emmet documentation to learn more about its HTML abbreviations and CSS abbreviations, including powerful features such as operators and modifiers.

Tailwind utility abbreviations

Use any of the class names from the popular TailwindCSS framework as abbreviations for writing CSS. If you know Tailwind—or want to learn it—this can boost your development speed.

Examples

The Tailwind class `flex` applies the CSS property `display: flex`. In the CSS Editor, if you enter:


	div {
  flex
}

...then press Tab after the word `flex`, Mobius recognizes and expands that abbreviation to: 


div {
  display: flex;
}

Here's another example. `grid-cols-3` is also a Tailwind class name. If you write it into a CSS rule like this:


	
	div {
  grid-cols-3
}

...then press Tab after `grid-cols-3`, Mobius expands that abbreviation to: 


div {
   grid-template-columns: repeat(3, minmax(0, 1fr));
}

View the TailwindCSS documentation to find class names and their corresponding CSS. Find one that's not supported? Let us know.

Keyboard shortcuts

Comment shortcuts

Standard comment shortcut

Like VS Code and other code editors, you can use Cmd (Mac) | Ctrl (PC) + / to toggle comments on the current line or a selected block of code.

Emmet comment shortcut

Mobius goes one step further and implements Emmet-style comment toggles. We'll call this the Emmet comment shortcut. Use Cmd (Mac) | Ctrl (PC) + Shift + / to use this style of comment toggling, which operates on the cursor's context.

Examples

When you use the standard comment shortcut on any line without highlighting multiple lines first, it only toggles commenting for that line. For example, if your cursor is placed on the first line of either code block below, the standard comment shortcut toggles commenting for only that single line:


	/* p { */
  color: red;
}
	


	
	(fix this)

For CSS, when you use the Emmet comment shortcut with your cursor on a selector, it takes the context into account and toggles commenting for that selector's entire CSS rule: 


	/* p {
  color: red;
} */

For HTML, when you use the Emmet comment shortcut on an HTML element's tags or text inside its tags, it toggles commenting for that entire element:

Media query wrapping

Use a keyboard shortcut to quickly wrap CSS property blocks with media queries. Highlight any code block, then type `Cmd (Mac) | Ctrl (PC) + Shift + ,`. In the input bar that appears, type one of the following preset sizes and press Enter:


	
	@sm
@md
@lg
@xl
@2xl
On this page