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

This comment has been minimized.

Copy link

@ice5050 ice5050 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

This comment has been minimized.

Copy link
Owner Author

@MattMcFarland MattMcFarland commented Jul 27, 2016

Cool!

@rabbit-93

This comment has been minimized.

Copy link

@rabbit-93 rabbit-93 commented Sep 12, 2016

Hi Matt, any news about VS Code version?

@cksachdev

This comment has been minimized.

Copy link

@cksachdev cksachdev commented Nov 10, 2016

How can I use this in webstorm?

@ryanpcmcquen

This comment has been minimized.

Copy link

@ryanpcmcquen 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

This comment has been minimized.

Copy link

@wilburpowery wilburpowery commented Jan 8, 2017

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

@imtmh

This comment has been minimized.

Copy link

@imtmh imtmh commented Jan 25, 2017

Cool stuff!

@no-stack-dub-sack

This comment has been minimized.

Copy link

@no-stack-dub-sack 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

This comment has been minimized.

Copy link

@anthonybrown 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

This comment has been minimized.

Copy link

@anthonybrown 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

This comment has been minimized.

Copy link

@florisvanderhaar florisvanderhaar commented May 11, 2017

Cool stuff.

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

@BigEricS

This comment has been minimized.

Copy link

@BigEricS BigEricS commented Jun 13, 2017

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

@sean-codes

This comment has been minimized.

Copy link

@sean-codes 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

This comment has been minimized.

Copy link

@Thomasduhtank 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