GitHub 代码块图标增强(基于 NerdFont)

通过为 GitHub 代码块设置 NerdFont 字体以显示更多图标。

当前为 2024-04-15 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name GitHub CodeBlock Icon Enhance PowerBy NerdFont
  3. // @name:zh-CN GitHub 代码块图标增强(基于 NerdFont)
  4. // @description Display more icons by setting NerdFont for GitHub's codeblock.
  5. // @description:zh-CN 通过为 GitHub 代码块设置 NerdFont 字体以显示更多图标。
  6. // @icon https://github.githubassets.com/favicons/favicon.png
  7. // @author cuiko
  8. // @namespace https://github.com/cuiko/codeblock-icon-enhance
  9. // @homepage https://github.com/cuiko/codeblock-icon-enhance
  10. // @supportURL https://github.com/cuiko/codeblock-icon-enhance/issues
  11. // @require https://unpkg.com/sweetalert2@11/dist/sweetalert2.min.js
  12. // @resource Swal https://unpkg.com/sweetalert2@11/dist/sweetalert2.min.css
  13. // @version 0.1.1
  14. // @license GPL-3.0
  15. // @match *://github.com/*
  16. // @match *://gitlab.com/*
  17. // @match *://gitee.com/*
  18. // @match *://stackoverflow.com/*
  19. // @match *://stackexchange.com/*
  20. // @match *://reddit.com/*
  21. // @match *://juejin.cn/*
  22. // @match *://segmentfault.com/*
  23. // @grant GM_setValue
  24. // @grant GM_getValue
  25. // @grant GM_addStyle
  26. // @grant GM_registerMenuCommand
  27. // @grant GM_getResourceText
  28. // @run-at document-start
  29. // ==/UserScript==
  30.  
  31. (function() {
  32. 'use strict'
  33.  
  34. class Fonts {
  35. constructor(...fonts) {
  36. if (fonts.length === 1 && Array.isArray(fonts[0])) {
  37. this.fonts = fonts.split(",")
  38. } else {
  39. this.fonts = fonts
  40. }
  41. }
  42.  
  43. add(...fonts) {
  44. this.fonts.push(...fonts)
  45. }
  46.  
  47. remove(font) {
  48. let index = this.fonts.indexOf(font)
  49. if (index !== -1) {
  50. this.fonts.splice(index, 1)
  51. }
  52. }
  53.  
  54. toString(separator = ",") {
  55. return this.fonts.join(separator)
  56. }
  57. }
  58.  
  59. let default_settings = {
  60. presetFonts: new Fonts("ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", "monospace"),
  61. customFonts: new Fonts("CaskaydiaCove Nerd Font Propo"),
  62. }
  63.  
  64. const Symbol = {
  65. PLUGIN_NAME: "codeblock-icon-enhance",
  66. }
  67.  
  68. let kit = {
  69. /**
  70. * prompt
  71. * @param {Object} options
  72. * @param {string} options.title
  73. * @param {string} options.default_value
  74. * @param {Function} options.callback
  75. */
  76. prompt: function(options) {
  77. let { title, default_value, callback } = options
  78.  
  79. if (Swal) {
  80. Swal.fire({
  81. title,
  82. input: "text",
  83. inputValue: default_value,
  84. }).then(({ value }) => callback(value))
  85. } else {
  86. const value = window.prompt(title, default_value)
  87. callback(value)
  88. }
  89. }
  90. }
  91.  
  92. /**
  93. * add style
  94. * @param {string} id
  95. * @param {string} tag
  96. * @param {string} css
  97. */
  98. function addStyle(id, tag, css) {
  99. tag = tag || 'style'
  100. let doc = document, styleDom = doc.getElementById(id)
  101. if (styleDom) styleDom.remove()
  102. let style = doc.createElement(tag)
  103. style.rel = 'stylesheet'
  104. style.id = id
  105. tag === 'style' ? style.innerHTML = css : style.href = css
  106. doc.getElementsByTagName('body')[0].appendChild(style)
  107. }
  108.  
  109. /**
  110. * apply fonts setting
  111. * @param fonts string
  112. * @returns {Fonts}
  113. */
  114. function applyFonts(fonts) {
  115. let codeblockFonts = fonts ? new Fonts(fonts) : default_settings.customFonts
  116.  
  117. GM_setValue(Symbol.PLUGIN_NAME, codeblockFonts.toString())
  118. addStyle(Symbol.PLUGIN_NAME, 'style', ` :root :is(pre,pre *,code,code *,.cm-editor [class*='cm-'] *,.code,.code *,.blob-num,.blob-num *,.blob-code,.blob-code *,textarea,.react-line-numbers *,.react-code-lines *):not([class*='expand' i],[class*='collapse' i]) { font-family: ${default_settings.presetFonts.toString()},${codeblockFonts} !important; } `)
  119.  
  120. return codeblockFonts
  121. }
  122.  
  123. function main() {
  124. // init default settings
  125. addStyle('swal-pub-style', 'style', GM_getResourceText('Swal'))
  126. let fonts = GM_getValue(Symbol.PLUGIN_NAME)
  127. let appliedFonts = applyFonts(fonts)
  128.  
  129. // init menu
  130. GM_registerMenuCommand('Font Settings', () => {
  131. kit.prompt({
  132. title: "Enter the font(s) you want to use for the code block",
  133. default_value: appliedFonts.toString(),
  134. callback: (value) => {
  135. appliedFonts = applyFonts(value)
  136. }
  137. })
  138. })
  139. }
  140. main()
  141. })()

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址