Free Operator Mono clone for Atom

A stylish way to code!

Check out the screenshots.

1. Install fonts
2. Configure Atom
3. Troubleshooting
4. Screenshots
5. JSX
6. Ruby
7. Ember
8. Handlebars
9. Elixir
10. Python

Download and install Fira Code font into your system. Installation instructions

Download and install flottflott font into your system in the same manner.

The current version (June 2017) of the fonts can also be found in this repository.

To use Fira Code properly you need to enable ligatures. There are two ways to do this, see below:

Bring up Atom and go to Settings > Themes. Search for Operator Mono and install.

This syntax theme has been built to support this Fira Code, it is built from scratch using the Oceanic Next Italic palette and it will enable ligatures, and make certain attributes italic.

If you prefer to use your own syntax theme, you have to edit your styles.less and insert these lines:

atom-text-editor {
  text-rendering: optimizeLegibility;

  &.editor .syntax--string.syntax--quoted,
  &.editor .syntax--string.syntax--regexp {
    -webkit-font-feature-settings: "liga" off, "calt" off;
  }
}

In order to enable the flottflott font, you have to manually edit your styles.less file and insert these lines:

atom-text-editor.editor {
  /*
    Transform certain attributes into flottflott:
    - this
    - html attributes
  */
  .syntax--variable.syntax--language.syntax--this,
  .syntax--html > .syntax--attribute-name,
  .syntax--JSXAttrs > .syntax--attribute-name {
    // flottflott is italic in itself, don't let atom make it italic
    font-style: normal !important;
    vertical-align: baseline;
    font-family: 'flottflott';
    height: inherit;
    font-size: 145%;
    line-height: 100%;
  }
}

Atom version

The instructions / code works for current version of Atom (1.17.x) but should work for Atom v1.13 and higher if you are locked to a specific version of Atom for some obscure reason. If not, check out the appropriate tag and use that.

Are your ligatures not being applied correctly?

1. In Editor Settings, you might need to enter "Fira Code" in "Font Family"
2. Disable interfering packages that modifies fonts, such as "fonts"

The screenshots below are taken with theme Oceanic Next Italic.