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