Set Fira Code as font in development websites

Unified use of `Fira Code` as the code font to enhance developers' awareness of the code on the page

目前為 2024-12-06 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name Set Fira Code as font in development websites
// @name:zh 将Fira Code 作为开发用网站的代码字体
// @description Unified use of `Fira Code` as the code font to enhance developers' awareness of the code on the page
// @description:zh 统一将`Fira Code`作为代码字体, 提高开发者对页面中的代码的感知度
// @version 2
// @author Arylo Yeung <[email protected]>
// @include https://webpack.js.org/*
// @include https://rollupjs.org/*
// @include https://jestjs.io/*
// @include https://turbo.build/*
// @include https://vite.dev/*
// @include https://vitest.dev/*
// @include https://lodash.com/*
// @include https://www.tampermonkey.net/*
// @include https://*.github.io/*
// @include https://docs.gitlab.com/*
// @include https://www.w3schools.com/*
// @include https://www.typescriptlang.org/*
// @include https://yarnpkg.com/*
// @include https://pnpm.io/*
// @include https://npmjs.com/*
// @include https://docs.npmjs.com/*
// @include https://nodejs.org/docs/*
// @include https://vuejs.org/api/*
// @include https://vueuse.org/*
// @include https://react.dev/*
// @include https://rxjs.dev/*
// @include https://axios-http.com/*
// @include https://nextjs.org/*
// @include https://eslint.org/*
// @include https://greasyfork.org/*/code
// @license MIT
// @resource font_css https://cdn.jsdelivr.net/npm/[email protected]/distr/fira_code.css
// @homepage https://github.com/Arylo/scripts#readme
// @supportURL https://github.com/Arylo/scripts/issues
// @run-at document-idle
// @grant GM_addStyle
// @grant GM_getResourceText
// @namespace https://greasyfork.org/users/1133279
// ==/UserScript==
"use strict";
(() => {
  // src/monkey/polyfill/GM.ts
  var thisGlobal = window;
  if (typeof thisGlobal.GM === "undefined") {
    thisGlobal.GM = {};
  }
  function getGMWindow() {
    return thisGlobal;
  }

  // src/monkey/polyfill/GM_addStyle.ts
  var w = getGMWindow();
  if (typeof w.GM_addStyle === "undefined") {
    w.GM_addStyle = function GM_addStyle2(cssContent) {
      const head = document.getElementsByTagName("head")[0];
      if (head) {
        const styleElement = document.createElement("style");
        styleElement.setAttribute("type", "text/css");
        styleElement.textContent = cssContent;
        head.appendChild(styleElement);
        return styleElement;
      }
      return null;
    };
  }
  if (typeof w.GM.addStyle === "undefined") {
    w.GM.addStyle = GM_addStyle;
  }

  // src/monkey/set-fira-code-development-websites/styles/template.css
  var template_default = "*{font-family:Fira Code,monospace!important;font-variant-ligatures:contextual}\n";

  // src/monkey/set-fira-code-development-websites/index.ts
  var DEFAULT_PARENT_SELECTORS = [
    ":not(li) > a",
    ":not(h1):not(h2):not(h3):not(h4):not(h5) >"
  ];
  var DEFAULT_CODE_SELECTORS = [
    "code",
    "code *",
    "pre:not(:has(code))"
  ];
  function parseSelectors(selectors, parentSelectors) {
    const realSelectors = selectors.reduce((list, s) => {
      for (const ps of parentSelectors) {
        list.push(`${ps} ${s}`);
      }
      return list;
    }, []);
    return realSelectors;
  }
  function parseFontString(selectors) {
    return template_default.replace(/\*/g, selectors.join(", "));
  }
  setTimeout(() => {
    const fontCssContent = GM_getResourceText("font_css").replace(/(\burl\(["'])/g, "$1https://cdn.jsdelivr.net/npm/[email protected]/distr/");
    GM_addStyle(fontCssContent);
    const codeSelectors = DEFAULT_CODE_SELECTORS;
    const parentSelectors = DEFAULT_PARENT_SELECTORS;
    const selectors = parseSelectors(codeSelectors, parentSelectors);
    switch (location.host) {
      case "react.dev":
        selectors.push(".sp-code-editor .cm-content");
        break;
      case "w3schools.com":
      case "www.w3schools.com":
        selectors.push(".w3-code");
        break;
    }
    GM_addStyle(parseFontString(selectors));
  }, 25);
})();