Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Using Operator Mono in Atom
/**
* Using Operator Mono in Atom
*
* 1. Open up Atom Preferences.
* 2. Click the “Open Config Folder” button.
* 3. In the new window’s tree view on the left you should see a file called “styles.less”. Open that up.
* 4. Copy and paste the CSS below into that file. As long as you have Operator Mono SSm installed you should be golden!
* 5. Tweak away.
*
* Theme from the screenshot (http://cdn.typography.com/assets/images/blog/operator_ide2.png):
* 1. UI Theme: One Dark (comes with Atom, I believe) — https://github.com/atom/one-dark-syntax
* 2. Syntax Theme: Oceanic Next — https://github.com/voronianski/oceanic-next-theme
*/
atom-workspace,
atom-text-editor {
font-family: "OperatorMonoSSm-Light";
font-size: 14px;
font-weight: normal;
line-height: 1.7;
}
atom-panel.tool-panel {
font-size: 0.88em;
}
.editor .comment,
atom-text-editor.editor .syntax--comment {
font-family: "OperatorMonoSSm-LightItalic";
font-style: normal;
}
@brandondurham

This comment has been minimized.

Copy link
Owner Author

brandondurham commented Feb 11, 2016

A few people have asked what theme/editor/settings I’m using in the code screenshot for this blog post. I thought I’d drop a few notes here sharing my setup.

1. FontOperator Mono ScreenSmart Book by Hoefler & Co.
2. Editor — I’m using Atom currently and really loving it.
3. UI Theme — For the UI Theme in Atom I’m using One Dark (which I believe comes with Atom).
4. Syntax Theme — For the Syntax Theme I’m using Oceanic Next.
5. CSS Overrides in Atom— And finally, I’ve applied the following CSS to the styles.less file in Atom:

atom-workspace,
atom-text-editor {
    font-family: "Operator Mono SSm";
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
 }
 atom-panel.tool-panel {
    font-size: 0.88em;
 }

Should be good to go after that!

@mauryaratan

This comment has been minimized.

Copy link

mauryaratan commented Feb 17, 2016

@brandondurham I tried setting it up exactly as you have instructed above, but can't seem to get my attributes displayed in italics. Can you confirm it's not some sort of extension or plugin doing the magic?

@venantius

This comment has been minimized.

Copy link

venantius commented Feb 17, 2016

@brandondurham Thanks so much for posting this, I've been trying to figure out this set-up ever since I saw the blog post :)

@aanndryyyy

This comment has been minimized.

Copy link

aanndryyyy commented Feb 17, 2016

@mauryaratan Add this to the styles.less file in Atom. At least, that's how I made it.

.entity.other.attribute-name {
    font-style: italic;
}

For HTML only

.entity.other.attribute-name.html {
    font-style: italic;
}
@dimitrieh

This comment has been minimized.

Copy link

dimitrieh commented Feb 19, 2016

I needed to add the following to get italics working:

atom-text-editor::shadow{
    .entity.other.attribute-name {
        font-style: italic;
    }
}
@mgoggin

This comment has been minimized.

Copy link

mgoggin commented Feb 24, 2016

@strages, @aanndryyyy

Thanks for the LESS snippets to get the italics working.

@ericclemmons

This comment has been minimized.

Copy link

ericclemmons commented Feb 28, 2016

Confirmed, @strages snippet worked for me, while @aanndryyyy's did it for some reason...

@EMGMatt

This comment has been minimized.

Copy link

EMGMatt commented May 9, 2016

@strages, @aanndryyyy

Thanks for the great snippets to get the italics working. Really feel in love with this style on Codepen and wanted to apply it to my personal setup. Thanks so much!

@MMux

This comment has been minimized.

Copy link

MMux commented May 19, 2016

@dimitrieh, @brandondurham For some reason, i can't get italics working for javascript files. Works well w/ html though.

Anyone have a suggestion?

@rrylee

This comment has been minimized.

Copy link

rrylee commented May 20, 2016

@dimitrieh Nice.

@haveanicedavid

This comment has been minimized.

Copy link

haveanicedavid commented May 31, 2016

Also not working on .js files. Any ideas?

@davidgustys

This comment has been minimized.

Copy link

davidgustys commented Jun 3, 2016

This is the complete css and it works just fine (2016-06-03):

atom-workspace,
  atom-text-editor {
     font-family: "Operator Mono";
     font-size: 14px;
     font-weight: 400;
     line-height: 1.7;
  }
  atom-panel.tool-panel {
     font-size: 0.88em;
  }
  .entity.other.attribute-name {
      font-style: italic;
  }
  atom-text-editor::shadow{
      .entity.other.attribute-name {
          font-style: italic;
      }
  }
@sscotth

This comment has been minimized.

Copy link

sscotth commented Jun 3, 2016

@haveanicedavid: make sure your language is set to "JavaScript (JSX)" or "Babel ES6 JavaScript"

@KyleKing

This comment has been minimized.

Copy link

KyleKing commented Jun 3, 2016

Is it possible to replicate something like this in Sublime?

@caroso1222

This comment has been minimized.

Copy link

caroso1222 commented Jun 9, 2016

Awesome! Italics working on html files with @gdeividas snippet but not in js. Language is set to "Babel ES6 JavaScript", but still not working. Any suggestions?

@youfoundron

This comment has been minimized.

Copy link

youfoundron commented Jun 9, 2016

Same here, have tried both Javascript (JSX) and Babel ES6 Javacript, I get italics on the comments but not on things like keywords.

Edit:
Nvm, fixed. Was using a different theme. Switched to oceanic and everything is peachy now 🍑

@caroso1222

This comment has been minimized.

Copy link

caroso1222 commented Jun 10, 2016

Thanks for the suggestion @rongierlach. Tried switching to oceanic-next with no luck. Then tried oceanic-reef-syntax and it's working like a charm. 💃

Edit: Didn't actually like oceanic-reef-syntax. The html syntax coloring is not what I expected. I switched back to oceanic-next but I had to tweak a little bit to get my js files working with this sweet font. Open the atom settings view and click on "Open Config Folder". Open the file packages/oceanic-next/styles/base.less. Add this line to the less file:

.variable.parameter, .entity.other.inherited-class, .storage.type, .entity.other.attribute-name.pseudo-class.css{
  font-style: italic;
}

Save, switch theme to One Dark and switch back to Oceanic Next again. You should be good to go now 💃

@eduard-ungureanu

This comment has been minimized.

Copy link

eduard-ungureanu commented Aug 16, 2016

Hi guys, can you please let me know if the Operator Mono ScreenSmart Book font is only premium font, which cost like 199 usd?

Please excuse my "stupid question"!

Thank you in advance
Best Regards.

@pete-hotchkiss

This comment has been minimized.

Copy link

pete-hotchkiss commented Aug 18, 2016

just to add to the thread on this. The only way I could get styles.less edits to actually be applied to the editor window was to look into the shadow-dom.

.editor, atom-text-editor::shadow {
  .entity.other.attribute-name {
      font-style: italic;
  }
}
@Dajust

This comment has been minimized.

Copy link

Dajust commented Aug 28, 2016

@brandondurham How do I install the Operator Mono? All I see is a link to buy it

@ambethia

This comment has been minimized.

Copy link

ambethia commented Aug 29, 2016

@Dajust It is not a free typeface, unfortunately.

@hozefaj

This comment has been minimized.

Copy link

hozefaj commented Aug 29, 2016

$200 for the font. Expensive.

@RedForty

This comment has been minimized.

Copy link

RedForty commented Sep 18, 2016

This IS possible to replicate in Sublime!

@kauffecup

This comment has been minimized.

Copy link

kauffecup commented Oct 21, 2016

if you want the comments to be super fun and cursive too, add:

atom-text-editor::shadow{
  .comment {
    font-style: italic;
  }
}

image

which would make the whole thing look like:

atom-workspace,
atom-text-editor {
  font-family: "Operator Mono";
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}
atom-panel.tool-panel {
  font-size: 0.88em;
}
.entity.other.attribute-name {
  font-style: italic;
}
atom-text-editor::shadow{
  .entity.other.attribute-name {
    font-style: italic;
  }
  .comment {
    font-style: italic;
  }
}
@blagoeres

This comment has been minimized.

Copy link

blagoeres commented Oct 30, 2016

It looks fantastic.

@mrchess

This comment has been minimized.

Copy link

mrchess commented Dec 7, 2016

FYI for those wondering what "JavaScript (JSX)" or "Babel ES6 JavaScript" is, they are in the language-babel package.

@AbhimanyuAryan

This comment has been minimized.

Copy link

AbhimanyuAryan commented Jan 2, 2017

can we use this in mono develop osx?

@rullyramanda

This comment has been minimized.

Copy link

rullyramanda commented Jan 12, 2017

This is not working anymore because Atom deprecated the shadow DOM from the text-editor element, any ideas how to make it work again?

@jackgeek

This comment has been minimized.

Copy link

jackgeek commented Jan 16, 2017

supposedly by prepending classes with syntax-- but I haven't seen this work.
Edit: actually when I applied it correctly it did work!

Here's a note atom gave me about it:

Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary. This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax--. To prevent breakage with existing style sheets, Atom will automatically upgrade the following selectors:

atom-text-editor::shadow .constant, atom-text-editor::shadow .variable => atom-text-editor.editor .syntax--constant, atom-text-editor.editor .syntax--variable
atom-text-editor::shadow .entity.other.attribute-name => atom-text-editor.editor .syntax--entity.syntax--other.syntax--attribute-name
Automatic translation of selectors will be removed in a few release cycles to minimize startup time. Please, make sure to upgrade the above selectors as soon as possible.

@brandondurham

This comment has been minimized.

Copy link
Owner Author

brandondurham commented Jan 17, 2017

@rullyramanda and @jackgeek

I just added an update that should fix the comments issue. It’s working on my end.

.editor .comment,
atom-text-editor.editor .syntax--comment {
    font-family: "OperatorMonoSSm-LightItalic";
    font-style: normal;
}
@Nalyvaiko

This comment has been minimized.

Copy link

Nalyvaiko commented Feb 4, 2017

for Windows laptop:

atom-workspace,
atom-text-editor {
    font-family: "Operator Mono Light";
    font-size: 16px;
    font-weight: 600;
    line-height: 1.7;
}
atom-text-editor {
    font-size: 18px;
}
atom-panel.tool-panel {
    font-size: 0.88em;
}
.entity.other.attribute-name {
    font-style: italic;
}
atom-text-editor.editor {
    .syntax--entity.syntax--other.syntax--attribute-name {
        font-style: italic;
    }
}
@carlosbensant

This comment has been minimized.

Copy link

carlosbensant commented Feb 17, 2017

For JavaScript development, would be missing to add:

.syntax--this.syntax--js { font-style: italic; }

@mohdhazwan

This comment has been minimized.

Copy link

mohdhazwan commented Feb 27, 2017

Try 'Vibur' by google fonts for free 'Operator Mono' alternative

Vibur

@prsnnami

This comment has been minimized.

Copy link

prsnnami commented Mar 11, 2017

@mohdhazwan How did you do this? I installed Vibur and i get the cursive style everywhere. Did you edit atom's stylesheet?

@aendrew

This comment has been minimized.

Copy link

aendrew commented Apr 27, 2017

@prsnnami I got it working by installing Vibur via Sky Fonts and then adding the following to Atom's styles.less file:

.entity.other.attribute-name {
    font-family: Vibur;
    font-weight: lighter;
    font-style: italic;
}
atom-text-editor.editor {
    .syntax--entity.syntax--other.syntax--attribute-name {
        font-family: Vibur;
        font-weight: lighter;
        font-style: italic;
    }
}
@hawkins

This comment has been minimized.

Copy link

hawkins commented May 17, 2017

For those still looking for alternatives like Vibur, Fira Code is also a great alternative to Operator Mono, but I personally still prefer Operator Mono.

@mrclayman

This comment has been minimized.

Copy link

mrclayman commented Jul 1, 2017

@brandondurham, have you tried a syntax theme that uses bold face for some of the markup elements? It seems to me that Atom (and VS Code for that matter) fake the bold face instead of using the true bold face that comes with the font family. Or is it just me and my Linux machine?

@jdkschang

This comment has been minimized.

Copy link

jdkschang commented Aug 18, 2017

Has anyone had this setup work for VS Code ?

@rayfoss

This comment has been minimized.

Copy link

rayfoss commented Oct 2, 2017

This worked for me in Atom 2

atom-workspace,
atom-text-editor {
    font-family: "OperatorMono-Light";
    font-weight: normal;
}

atom-panel.tool-panel {
}

.editor .comment,
atom-text-editor.editor {
    font-family: "OperatorMono-Light";
    font-style: normal;
}

.syntax--keyword, .syntax--control, .syntax--attribute-name {
  font-style: italic;
}
@iamchriswick

This comment has been minimized.

Copy link

iamchriswick commented Nov 4, 2017

The following works fine on Atom 1.21.2 on macOS Sierra

.atom/styles.less

atom-text-editor,
atom-workspace {
    font-family: "OperatorSSm-Book";
    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;
}

atom-panel.tool-panel {
    font-size: 0.88em;
}

.editor .comment,
atom-text-editor.editor .syntax--comment {
    font-family: "OperatorSSm-LightItalic";
    font-style: normal;
}

.syntax--attribute-name,
.entity.other.attribute-name,
.syntax--control,
.syntax--keyword {
    font-style: italic;
}

And as @caroso1222 mentioned above:

packages/oceanic-next/styles/base.less

.entity.other.attribute-name.pseudo-class.css,
.entity.other.inherited-class,
.storage.type,
.variable.parameter {
    font-style: italic;
}
@imyxh

This comment has been minimized.

Copy link

imyxh commented Apr 21, 2018

@mrclayman have you tried defining a separate font for the bold variant? That's what's usually done in web design and since Atom is an electron app I would assume the same is required.

@mrclayman

This comment has been minimized.

Copy link

mrclayman commented Jul 26, 2019

@imyxh, it was actually the font family setting in the font files themselves. Once I changed that setting through FontForge, the problem went away.

@brandondurham

This comment has been minimized.

Copy link
Owner Author

brandondurham commented Jul 26, 2019

@mrclayman — Yes, it depends on how the source fonts want to have their weights declared. With some, you can’t use weight like bold or 700. You have to declare each “style” individually. Hope it worked out in the end!

@mrclayman

This comment has been minimized.

Copy link

mrclayman commented Jul 26, 2019

Indeed, @brandondurham. I use Linux, which usually uses a font configuration system called "fontconfig" that appears to rely on TTF-based weight settings. After tweaking the weight settings in the font files, everything started working beautifully. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.