☰

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

  1. // ==UserScript==
  2. // @name Set Fira Code as font in development websites
  3. // @name:zh-CN 将Fira Code 作为开发用网站的代码字体
  4. // @namespace https://greasyfork.org/users/1133279
  5. // @description Unified use of `Fira Code` as the code font to enhance developers' awareness of the code on the page
  6. // @description:zh-CN 统一将`Fira Code`作为代码字体, 提高开发者对页面中的代码的感知度
  7. // @version 9
  8. // @author Arylo
  9. // @include https://webpack.js.org/*
  10. // @include https://rollupjs.org/*
  11. // @include https://jestjs.io/*
  12. // @include https://turbo.build/*
  13. // @include https://vite.dev/*
  14. // @include https://vitest.dev/*
  15. // @include https://lodash.com/*
  16. // @include https://docs.taro.zone/*
  17. // @include https://ajv.js.org/*
  18. // @include https://yargs.js.org/*
  19. // @include https://www.tampermonkey.net/*
  20. // @include https://*.github.io/*
  21. // @include https://docs.gitlab.com/*
  22. // @include https://www.w3schools.com/*
  23. // @include https://www.typescriptlang.org/*
  24. // @include https://yarnpkg.com/*
  25. // @include https://pnpm.io/*
  26. // @include https://npmjs.com/*
  27. // @include https://docs.npmjs.com/*
  28. // @include https://nodejs.org/docs/*
  29. // @include https://vuejs.org/api/*
  30. // @include https://vueuse.org/*
  31. // @include https://react.dev/*
  32. // @include https://rxjs.dev/*
  33. // @include https://axios-http.com/*
  34. // @include https://nextjs.org/*
  35. // @include https://docs.nestjs.com/*
  36. // @include https://eslint.org/*
  37. // @include https://mochajs.org/*
  38. // @include https://toml.io/*
  39. // @include https://ls-lint.org/*
  40. // @include https://nodemailer.com/*
  41. // @include https://greasyfork.org/*/code
  42. // @include https://docs.docker.com/*
  43. // @include https://developers.weixin.qq.com/miniprogram/*
  44. // @license MIT
  45. // @resource font_css https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css
  46. // @homepage https://greasyfork.org/zh-CN/scripts/519936
  47. // @supportURL https://greasyfork.org/zh-CN/scripts/519936/feedback
  48. // @run-at document-idle
  49. // @grant GM_addStyle
  50. // @grant GM_getResourceText
  51. // ==/UserScript==
  52. "use strict";
  53. (() => {
  54.   // src/monkey/polyfill/GM.ts
  55.   var thisGlobal = window;
  56.   if (typeof thisGlobal.GM === "undefined") {
  57.     thisGlobal.GM = {};
  58.   }
  59.   function getGMWindow() {
  60.     return thisGlobal;
  61.   }
  62.  
  63.   // src/monkey/polyfill/GM_addStyle.ts
  64.   var w = getGMWindow();
  65.   if (typeof w.GM_addStyle === "undefined") {
  66.     w.GM_addStyle = function GM_addStyle2(cssContent) {
  67.       const head = document.getElementsByTagName("head")[0];
  68.       if (head) {
  69.         const styleElement = document.createElement("style");
  70.         styleElement.setAttribute("type", "text/css");
  71.         styleElement.textContent = cssContent;
  72.         head.appendChild(styleElement);
  73.         return styleElement;
  74.       }
  75.       return null;
  76.     };
  77.   }
  78.   if (typeof w.GM.addStyle === "undefined") {
  79.     w.GM.addStyle = GM_addStyle;
  80.   }
  81.  
  82.   // src/monkey/set-fira-code-development-websites/styles/template.css
  83.   var template_default = '*{font-family:Fira Code,monospace!important;font-variant-ligatures:contextual;font-feature-settings:"calt"}\n';
  84.  
  85.   // src/monkey/set-fira-code-development-websites/index.ts
  86.   var DEFAULT_PARENT_SELECTORS = [
  87.     ":not(li) > a",
  88.     ":not(h1):not(h2):not(h3):not(h4):not(h5) >"
  89.   ];
  90.   var DEFAULT_CODE_SELECTORS = [
  91.     "code",
  92.     "code *",
  93.     "pre:not(:has(code))"
  94.   ];
  95.   function parseSelectors(selectors, parentSelectors) {
  96.     const realSelectors = selectors.reduce((list, s) => {
  97.       for (const ps of parentSelectors) {
  98.         list.push(`${ps} ${s}`);
  99.       }
  100.       return list;
  101.     }, []);
  102.     return realSelectors;
  103.   }
  104.   function parseFontString(selectors) {
  105.     return template_default.replace(/\*/g, selectors.join(", "));
  106.   }
  107.   setTimeout(() => {
  108.     const fontCssContent = GM_getResourceText("font_css").replace(/(\burl\(["'])/g, "$1https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/");
  109.     GM_addStyle(fontCssContent);
  110.     const codeSelectors = DEFAULT_CODE_SELECTORS;
  111.     const parentSelectors = DEFAULT_PARENT_SELECTORS;
  112.     const selectors = parseSelectors(codeSelectors, parentSelectors);
  113.     switch (location.host) {
  114.       case "react.dev":
  115.         selectors.push(".sp-code-editor .cm-content");
  116.         break;
  117.       case "w3schools.com":
  118.       case "www.w3schools.com":
  119.         selectors.push(".w3-code");
  120.         break;
  121.     }
  122.     GM_addStyle(parseFontString(selectors));
  123.   }, 25);
  124. })();