Ligature fonts for atom

styles.less

atom-text-editor {
  font-family: 'Fira Code';
  font-style: normal;  
  text-rendering: optimizeLegibility;
}
atom-text-editor::shadow {
  .string.quoted,
  .string.regexp {
    -webkit-font-feature-settings: "liga" off, "calt" off;
  }
  .source.js.jsx > .keyword.control.flow.js,
  .storage, .type .function {
    vertical-align: baseline;
    font-family: 'flottflott';
    height: inherit;
    font-size: 1.5em;
    line-height: 1rem;
  }
  .source.js.jsx,
  .storage.type.function.arrow.js,
  .variable {
    font-family: 'Fira Code';
    font-style: normal;
  }
  .string.unquoted.js {
    color: #CDD3DE;
  }
  .entity.name {
    font-weight: bold;
  }
}

Thanks for the very awesome style. :)

This is my version after trying to make it dynamic to other font-size, and make arrow function size to normal.

@fontsize: 16px;

atom-text-editor {
  font-family: 'Fira Code';
  font-style: normal;  
  text-rendering: optimizeLegibility;
}
atom-text-editor::shadow {
  .string.quoted,
  .string.regexp {
    -webkit-font-feature-settings: "liga" off, "calt" off;
  }
  .source.js.jsx > .keyword.control.flow.js,
  .storage, .type .function {
    vertical-align: baseline;
    font-family: 'flottflott';
    height: inherit;
    font-size: 1.5 * @fontsize;
    line-height: @fontsize;
  }
  .source.js.jsx,
  .storage.type.function.arrow.js,
  .indent-guide,
  .variable {
    font-family: 'Fira Code';
    font-style: normal;
    font-size: @fontsize;
    line-height: 1.5 * @fontsize;
  }
  .string.unquoted.js {
    color: #CDD3DE;
  }
  .entity.name {
    font-weight: bold;
  }
}

Cool!

Hi Matt, any news about VS Code version?

How can I use this in webstorm?

Thank you for the tutorial and stylesheet! I added a section to make the comments italicized, which is a little closer to Operator:

    .syntax--comment {
        font-style: italic;
    }

I've also updated it for the selector changes in Atom 1.13.0 and switched to Script12 BT instead of flottflott. It looks amazing now!

https://gist.github.com/ryanpcmcquen/f99453c871b4ce393fea5a274eed4cb3

Thanks for this.
My editor looks 100% better now.
Love It!!

Cool stuff!

@MattMcFarland Hey Matt, this is all super awesome! Thanks! Any idea how to select and style the this keyword?

EDIT: Never mind 😄 got it!

If anyone is interested: .syntax--variable.syntax--language.syntax--js

Seems like a few of my keywords like let and className are not getting the flottflott font applied.
Here is my stylesheet (I updated the deprecated syntax)
here
Anyone know how to fix this?

Some ligatures don't work as well.
The arrow function ligature seems to work only inside a div or span

Cool stuff.

I found this post on how to do the same in VS Code.

that is really cool! to bad i can't get html & css to do that as well

Hi! Ty for this styles! The ::shadow is coming up as deprecated. I changed my stylesheet to match their suggestions! I'm not sure how to use this so I'm going to put the changes below:

atom-text-editor {
  font-family: 'Fira Code';
  font-style: normal;
  text-rendering: optimizeLegibility;
}
atom-text-editor.editor {
  .syntax--string.syntax--quoted,
  .syntax--string.syntax--regexp {
    -webkit-font-feature-settings: "liga" off, "calt" off;
  }
  .syntax--source.syntax--js.syntax--jsx > .syntax--keyword.syntax--syntax--control.syntax--flow.syntax--js,
  .syntax--storage, .syntax--type .syntax--function {
    vertical-align: baseline;
    font-family: 'flottflott';
    height: inherit;
    font-size: 1.5em;
    line-height: 1rem;
  }
  .syntax--source.syntax--js.syntax--jsx,
  .syntax--storage.syntax--type.syntax--function.syntax--arrow.syntax--js,
  .syntax--variable {
    font-family: 'Fira Code';
    font-style: normal;
  }
  .syntax--string.syntax--unquoted.syntax--js {
    color: #CDD3DE;
  }
  .syntax--entity.syntax--name {
    font-weight: bold;
  }
}

any chance we can get an updated version for 2019 with Fira Code and BT? I can't seem to get mine to work.