A userscript to enable ligatures (using Fira Code) on <code> blocks and Monaco Editors.

gitlab-firacode.user.js

// ==UserScript==
// @name     Browser Fira Code
// @version  1
// @grant    none
// ==/UserScript==

const GM_addCssResource = href => {
    const head = document.getElementsByTagName('head')[0]
    if (!head) { return }
  
    let link = document.createElement('link')
    link.type = 'text/css'
    link.href = href
    head.appendChild(link)
}

const GM_addStyle = css => {
    const head = document.getElementsByTagName('head')[0]
    if (!head) { return }
  
    let style = document.createElement('style')
    style.type = 'text/css'
    style.innerHTML = css.replace(/;/g, ' !important;')
    head.appendChild(style)
}

GM_addCssResource('https://fonts.googleapis.com/css?family=Fira+Code&display=swap')
GM_addStyle('code, .view-lines *, table.highlight tr *, div.highlight:not(.result) *, pre.highlight * { font-family: \'Fira Code\', monospace; font-feature-settings: "liga" on; }')


/* Selector explanations:
 * code -> all code blocks
 * .view-lines * -> Azure support
 * table.highlight tr * -> Github support
 * div.highlight:not(.result) * -> div blocks with the highlight class, but not result class (duckduckgo fix)
 * pre.highlight * -> Gitlab support
 */