Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ligature fonts for atom
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;
}
}
@integer-underflow
Copy link

integer-underflow commented Jul 27, 2016

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;
  }
}

@MattMcFarland
Copy link
Author

MattMcFarland commented Jul 27, 2016

Cool!

@rabbit-93
Copy link

rabbit-93 commented Sep 12, 2016

Hi Matt, any news about VS Code version?

@cksachdev
Copy link

cksachdev commented Nov 10, 2016

How can I use this in webstorm?

@ryanpcmcquen
Copy link

ryanpcmcquen commented Dec 20, 2016

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

@wilburpowery
Copy link

wilburpowery commented Jan 8, 2017

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

@imtmh
Copy link

imtmh commented Jan 25, 2017

Cool stuff!

@no-stack-dub-sack
Copy link

no-stack-dub-sack commented Feb 11, 2017

@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

@anthonybrown
Copy link

anthonybrown commented May 8, 2017

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?

@anthonybrown
Copy link

anthonybrown commented May 8, 2017

Some ligatures don't work as well.
The arrow function ligature seems to work only inside a div or span
screen shot 2017-05-08 at 2 24 32 pm

@florisvanderhaar
Copy link

florisvanderhaar commented May 11, 2017

Cool stuff.

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

@BigEricS
Copy link

BigEricS commented Jun 13, 2017

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

@sean-codes
Copy link

sean-codes commented Aug 5, 2017

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;
  }
}

@Thomasduhtank
Copy link

Thomasduhtank commented Mar 27, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment