Skip to content

Instantly share code, notes, and snippets.

@MattMcFarland
Created July 15, 2016 17:00
Show Gist options
  • Star 19 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save MattMcFarland/e41ef709b1d82adea800563a86805559 to your computer and use it in GitHub Desktop.
Save MattMcFarland/e41ef709b1d82adea800563a86805559 to your computer and use it in GitHub Desktop.
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;
}
}
@wilburpowery
Copy link

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

Cool stuff.

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

@BigEricS
Copy link

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

@sean-codes
Copy link

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

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