GreasyFork Code: Syntax Highlight by CodeMirror

To syntax highlight GreasyFork Code by CodeMirror

Verze ze dne 30. 07. 2023. Zobrazit nejnovější verzi.

  1. // ==UserScript==
  2. // @name GreasyFork Code: Syntax Highlight by CodeMirror
  3. // @namespace Violentmonkey Scripts
  4. // @match https://greatest.deepsurf.us/*
  5. // @grant none
  6. // @version 0.1.7
  7. // @author CY Fung
  8. // @description To syntax highlight GreasyFork Code by CodeMirror
  9. // @run-at document-start
  10. // @inject-into page
  11. // @unwrap
  12. // @license MIT
  13. // ==/UserScript==
  14.  
  15.  
  16.  
  17. (() => {
  18. let byPass = true;
  19.  
  20. let documentReady = new Promise(resolve => {
  21. Promise.resolve().then(() => {
  22. if (document.readyState !== 'loading') {
  23. resolve();
  24. } else {
  25. window.addEventListener("DOMContentLoaded", resolve, false);
  26. }
  27. });
  28. });
  29.  
  30. // Function to load CodeMirror library
  31. function loadCodeMirror(arr) {
  32.  
  33.  
  34. const promises = arr.map((href) => {
  35. return new Promise(resolve => {
  36.  
  37.  
  38. const script = document.createElement('script');
  39. script.src = href;
  40. script.onload = () => {
  41. resolve(script);
  42. };
  43. document.head.appendChild(script);
  44.  
  45. });
  46.  
  47.  
  48. });
  49.  
  50. return Promise.all(promises);
  51. }
  52.  
  53. // Function to load CodeMirror CSS
  54. function loadCodeMirrorCSS(href) {
  55. const link = document.createElement('link');
  56. link.rel = 'stylesheet';
  57. link.href = href;
  58. document.head.appendChild(link);
  59. }
  60.  
  61. async function runBlock(codeBlock) {
  62.  
  63. let textarea = document.createElement('textarea');
  64. textarea.value = `${codeBlock.textContent}`;
  65. textarea.readOnly = true;
  66. textarea.id = 'editor651';
  67.  
  68. textarea.style.width = '100%';
  69. textarea.style.height = '400px';
  70.  
  71. codeBlock.replaceWith(textarea);
  72. codeBlock.remove();
  73.  
  74. await new Promise(r => setTimeout(r, 40));
  75.  
  76.  
  77.  
  78.  
  79. let editor651 = CodeMirror.fromTextArea(document.querySelector('#editor651'), {
  80.  
  81. mode: "javascript",
  82.  
  83. readOnly: true,
  84. styleActiveLine: true,
  85. lineNumbers: true,
  86. });
  87. editor651.save();
  88.  
  89.  
  90.  
  91.  
  92.  
  93.  
  94.  
  95. }
  96.  
  97. // Main function to apply CodeMirror syntax highlighting to pre elements
  98. function applyCodeMirrorSyntaxHighlighting() {
  99. const codeBlocks = document.querySelectorAll('pre.prettyprint.linenums.lang-js');
  100.  
  101.  
  102. // Check if CodeMirror is loaded
  103. if (typeof CodeMirror !== 'undefined') {
  104.  
  105. codeBlocks.forEach(runBlock);
  106. } else {
  107. console.error('CodeMirror library is not loaded. Syntax highlighting cannot be applied.');
  108. }
  109. }
  110.  
  111. async function doAction() {
  112.  
  113.  
  114. await new Promise(r => setTimeout(r, 20));
  115.  
  116.  
  117. document.head.appendChild(document.createElement('style')).textContent = `
  118. body {
  119. display: flex;
  120. flex-direction: column;
  121. height: 100vh;
  122. }
  123. body > div:last-child {
  124. height:0;
  125. flex-grow:1;
  126. display: flex;
  127. flex-direction:column;
  128. }
  129. body > div:last-child > #script-info:last-child {
  130. height:0;
  131. flex-grow:1;
  132. display: flex;
  133. flex-direction:column;
  134. }
  135. body > div:last-child > #script-info:last-child > #script-content:last-child {
  136. height:0;
  137. flex-grow:1;
  138. display: flex;
  139. flex-direction:column;
  140. gap:2px;
  141. }
  142. body > div:last-child > #script-info:last-child > #script-content:last-child > * {
  143. margin:0;
  144. }
  145. body > div:last-child > #script-info:last-child > #script-content:last-child > .code-container:last-child {
  146. height:0;
  147. flex-grow:1;
  148. display: flex;
  149. flex-direction:column;
  150. }
  151. body > div:last-child > #script-info:last-child > #script-content:last-child > .code-container:last-child > textarea:last-child {
  152. height:0;
  153. flex-grow:1;
  154. display: flex;
  155. flex-direction:column;
  156. }
  157. body > div:last-child > #script-info:last-child > #script-content:last-child > .code-container:last-child > .CodeMirror:last-child {
  158. height:0;
  159. flex-grow:1;
  160. display: flex;
  161. flex-direction:column;
  162. }
  163. `;
  164.  
  165. await loadCodeMirror(['https://cdn.jsdelivr.net/npm/codemirror@5.65.14/lib/codemirror.min.js']);
  166.  
  167. await loadCodeMirror([
  168. 'https://cdn.jsdelivr.net/npm/codemirror@5.65.14/mode/javascript/javascript.min.js',
  169. 'https://cdn.jsdelivr.net/npm/codemirror@5.65.14/addon/selection/active-line.min.js']);
  170.  
  171. loadCodeMirrorCSS('https://cdn.jsdelivr.net/npm/codemirror@5.65.14/lib/codemirror.min.css');
  172.  
  173. await new Promise(r => setTimeout(r, 20));
  174.  
  175.  
  176.  
  177. byPass = false;
  178.  
  179. applyCodeMirrorSyntaxHighlighting();
  180.  
  181.  
  182.  
  183.  
  184.  
  185. }
  186.  
  187.  
  188. let mgg = 0;
  189. async function mTz() {
  190. if (mgg) return;
  191. mgg = 1;
  192. documentReady.then(doAction);
  193. }
  194.  
  195.  
  196.  
  197. function getElementsByTagName(tag) {
  198.  
  199. if (byPass) {
  200. if (tag === 'pre' || tag === 'code' || tag === 'xmp') {
  201. if(location.pathname.endsWith('/code')){
  202.  
  203. setTimeout(mTz, 10)
  204. return [];
  205. }
  206. }
  207. }
  208. return this.getElementsByTagName331(tag);
  209. }
  210.  
  211.  
  212.  
  213. HTMLElement.prototype.getElementsByTagName331 = HTMLElement.prototype.getElementsByTagName
  214. Document.prototype.getElementsByTagName331 = Document.prototype.getElementsByTagName
  215.  
  216. HTMLElement.prototype.getElementsByTagName = getElementsByTagName
  217. Document.prototype.getElementsByTagName = getElementsByTagName
  218.  
  219. /*
  220. let mz= function(evt){
  221.  
  222. if(evt && evt.type ==='readystatechange') return;
  223. return EventTarget.prototype.addEventListener.apply(this,arguments)
  224.  
  225. };
  226. window.addEventListener = mz
  227. document.addEventListener = mz;
  228. */
  229.  
  230.  
  231. documentReady.then(async () => {
  232.  
  233. if(location.pathname.endsWith('/code')) return;
  234.  
  235. byPass = false;
  236.  
  237. });
  238.  
  239. })();
  240.  
  241.  
  242.  
  243.  
  244.