GreasyFork Code: Syntax Highlight by CodeMirror

To syntax highlight GreasyFork Code by CodeMirror

As of 2023-07-30. See the latest version.

  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.2.0
  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.  
  69. // textarea.classList.add('code-container')
  70.  
  71. textarea.style.width = '100%';
  72. textarea.style.height = '100vh';
  73.  
  74.  
  75. codeBlock.replaceWith(textarea);
  76. codeBlock.remove();
  77.  
  78. await new Promise(r => setTimeout(r, 40));
  79.  
  80.  
  81.  
  82.  
  83. let editor651 = CodeMirror.fromTextArea(document.querySelector('#editor651'), {
  84.  
  85. mode: "javascript",
  86.  
  87. readOnly: true,
  88. styleActiveLine: true,
  89. lineNumbers: true,
  90. extraKeys: {"Alt-F": "findPersistent"}
  91. });
  92. editor651.save();
  93.  
  94.  
  95.  
  96.  
  97.  
  98.  
  99.  
  100. }
  101.  
  102. // Main function to apply CodeMirror syntax highlighting to pre elements
  103. function applyCodeMirrorSyntaxHighlighting() {
  104. const codeBlocks = document.querySelectorAll('pre.prettyprint.linenums.lang-js');
  105.  
  106.  
  107. // Check if CodeMirror is loaded
  108. if (typeof CodeMirror !== 'undefined') {
  109.  
  110. codeBlocks.forEach(runBlock);
  111. } else {
  112. console.error('CodeMirror library is not loaded. Syntax highlighting cannot be applied.');
  113. }
  114. }
  115.  
  116. async function doAction() {
  117.  
  118.  
  119. await new Promise(r => setTimeout(r, 20));
  120.  
  121.  
  122.  
  123. document.head.appendChild(document.createElement('style')).textContent = `
  124.  
  125. .code-container{
  126. height:100vh;
  127. }
  128. .code-container .CodeMirror, .code-container textarea{
  129. height:100%;
  130. }
  131. /*
  132. body {
  133. display: flex;
  134. flex-direction: column;
  135. height: 100vh;
  136. }
  137. body > div:last-child {
  138. height:0;
  139. flex-grow:1;
  140. display: flex;
  141. flex-direction:column;
  142. }
  143. body > div:last-child > #script-info:last-child {
  144. height:0;
  145. flex-grow:1;
  146. display: flex;
  147. flex-direction:column;
  148. }
  149. body > div:last-child > #script-info:last-child > #script-content:last-child {
  150. height:0;
  151. flex-grow:1;
  152. display: flex;
  153. flex-direction:column;
  154. gap:2px;
  155. }
  156. body > div:last-child > #script-info:last-child > #script-content:last-child > * {
  157. margin:0;
  158. }
  159. body > div:last-child > #script-info:last-child > #script-content:last-child > .code-container:last-child {
  160. height:0;
  161. flex-grow:1;
  162. display: flex;
  163. flex-direction:column;
  164. }
  165. body > div:last-child > #script-info:last-child > #script-content:last-child > .code-container:last-child > textarea:last-child {
  166. height:0;
  167. flex-grow:1;
  168. display: flex;
  169. flex-direction:column;
  170. }
  171. body > div:last-child > #script-info:last-child > #script-content:last-child > .code-container:last-child > .CodeMirror:last-child {
  172. height:0;
  173. flex-grow:1;
  174. display: flex;
  175. flex-direction:column;
  176. }
  177. */
  178. `;
  179.  
  180. await loadCodeMirror(['https://cdn.jsdelivr.net/npm/codemirror@5.65.14/lib/codemirror.min.js']);
  181.  
  182. await loadCodeMirror([
  183. 'https://cdn.jsdelivr.net/npm/codemirror@5.65.14/mode/javascript/javascript.min.js',
  184. 'https://cdn.jsdelivr.net/npm/codemirror@5.65.14/addon/selection/active-line.min.js',
  185.  
  186.  
  187. 'https://cdn.jsdelivr.net/npm/codemirror@5.65.14/addon/search/search.js',
  188. 'https://cdn.jsdelivr.net/npm/codemirror@5.65.14/addon/search/searchcursor.js',
  189. 'https://cdn.jsdelivr.net/npm/codemirror@5.65.14/addon/search/jump-to-line.js',
  190. 'https://cdn.jsdelivr.net/npm/codemirror@5.65.14/addon/dialog/dialog.js'
  191.  
  192. ]);
  193.  
  194. loadCodeMirrorCSS('https://cdn.jsdelivr.net/npm/codemirror@5.65.14/lib/codemirror.min.css');
  195. loadCodeMirrorCSS('https://cdn.jsdelivr.net/npm/codemirror@5.65.14/addon/dialog/dialog.css');
  196.  
  197. await new Promise(r => setTimeout(r, 20));
  198.  
  199.  
  200.  
  201. byPass = false;
  202.  
  203. applyCodeMirrorSyntaxHighlighting();
  204.  
  205.  
  206.  
  207.  
  208.  
  209.  
  210. }
  211.  
  212.  
  213. let mgg = 0;
  214. async function mTz() {
  215. if (mgg) return;
  216. mgg = 1;
  217. documentReady.then(doAction);
  218. }
  219.  
  220.  
  221.  
  222. function getElementsByTagName(tag) {
  223.  
  224. if (byPass) {
  225. if (tag === 'pre' || tag === 'code' || tag === 'xmp') {
  226. if(location.pathname.endsWith('/code')){
  227.  
  228. setTimeout(mTz, 10)
  229. return [];
  230. }
  231. }
  232. }
  233. return this.getElementsByTagName331(tag);
  234. }
  235.  
  236.  
  237.  
  238. HTMLElement.prototype.getElementsByTagName331 = HTMLElement.prototype.getElementsByTagName
  239. Document.prototype.getElementsByTagName331 = Document.prototype.getElementsByTagName
  240.  
  241. HTMLElement.prototype.getElementsByTagName = getElementsByTagName
  242. Document.prototype.getElementsByTagName = getElementsByTagName
  243.  
  244. /*
  245. let mz= function(evt){
  246.  
  247. if(evt && evt.type ==='readystatechange') return;
  248. return EventTarget.prototype.addEventListener.apply(this,arguments)
  249.  
  250. };
  251. window.addEventListener = mz
  252. document.addEventListener = mz;
  253. */
  254.  
  255.  
  256. documentReady.then(async () => {
  257.  
  258. if(location.pathname.endsWith('/code')) return;
  259.  
  260. byPass = false;
  261.  
  262. });
  263.  
  264. })();
  265.  
  266.  
  267.  
  268.  
  269.