Fira Code, and sexy ligatures! #theme #userstyle

._userstyles-fira-code

Userstyles to the monospace fonts on certain sites and the Firefox Devtools, etc., to Fira Code.

I don't write userstyles very often, so these may not be particularly effecient or sensible. But at least they work. Corrections welcome!

Stylish of Firefox (at least) allows importing userstyles from arbitrary urls. It doesn't auto-update though, but mays till be easier than pasting by hand? :shrug:

atom.css

@-moz-document url-prefix('https://atom.io/') {
    .markdown-body pre, code {
        font-family: "Fira Code" !important;
    }
}

babel.css

@-moz-document url-prefix('https://babeljs.io/repl/') {
    div.ace_text-layer, div.babel-repl-reporter {
        font-family: "Fira Code" !important;
    }
}

codepen.css

@-moz-document url-prefix('https://codepen.io/') {
    pre {
        font-family: "Fira Code" !important;
    }
}

firefox-devtools

*.devtools-monospace {
    font-family: "Fira Code" !important;
}

gistbox.css

@-moz-document url-prefix('https://app.gistboxapp.com') {
    code, div.ace_editor, .blob-code  {
        font-family: "Fira Code" !important;
    }
}

github.css

@-moz-document url-prefix('https://github.com'), url-prefix('https://gist.github.com') {
    pre, code, div.ace_editor, .blob-code  {
        font-family: "Fira Code" !important;
    }
}

glitch.css

@-moz-document url-prefix('https://glitch.com') {
    pre {
        font-family: "Fira Code" !important;
    }
}

hashify.css

@-moz-document url-prefix('http://hashify.me') {
    pre, code, textarea  {
        font-family: "Fira Code" !important;
    }
}

jsfiddle.css

@-moz-document url-prefix('https://jsfiddle.net/') {
    pre, code {
        font-family: "Fira Code" !important;
        font-variant-ligatures: normal !important;
    }
}

leanpub.css

@-moz-document url-prefix('https://leanpub.com/') {
    pre, code  {
        font-family: "Fira Code" !important;
    }
}

learnxinyminutes.css

@-moz-document url-prefix('https://learnxinyminutes.com') {
    pre, code  {
        font-family: "Fira Code" !important;
    }
}

purescript.css

@-moz-document url-prefix('http://try.purescript.org'), url-prefix('http://purescript.org') {
    pre, code, .ace_editor  {
        font-family: "Fira Code" !important;
    }
}

replit.css

/* Repl.it doesn't take kindly to variable width fonts. Breaks.
@-moz-document url-prefix('https://repl.it/') {
    div.ace_text-layer, pre.jqconsole {
        font-family: "Fira Code" !important;
    }
}
*/

runkit.css

@-moz-document url-prefix('https://runkit.com/') {
    div.CodeMirror-scroll {
        font-family: "Fira Code" !important;
    }
}

slack.css

@-moz-document domain('slack.com') {
    pre, code  {
        font-family: "Fira Code" !important;
    }
}

Note: for these to work in Firefox, you need to set layout.css.moz-document.content.enabled in about:config to true.