Skip to content

Instantly share code, notes, and snippets.

@brandondurham
Last active January 11, 2024 06:46
Star You must be signed in to star a gist
Save brandondurham/3828ac42766f9f187c8e to your computer and use it in GitHub Desktop.
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;
}
@hozefaj
Copy link

hozefaj commented Aug 29, 2016

$200 for the font. Expensive.

@RedForty
Copy link

This IS possible to replicate in Sublime!

@kauffecup
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
Copy link

It looks fantastic.

@mrchess
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
Copy link

can we use this in mono develop osx?

@rullyramanda
Copy link

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
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
Copy link
Author

@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
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
Copy link

For JavaScript development, would be missing to add:

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

@mohdhazwan
Copy link

mohdhazwan commented Feb 27, 2017

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

Vibur

@prsnnami
Copy link

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

@aendra-rininsland
Copy link

aendra-rininsland 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
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
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
Copy link

Has anyone had this setup work for VS Code ?

@FossPrime
Copy link

FossPrime 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
Copy link

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
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
Copy link

@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
Copy link
Author

@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
Copy link

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