☰

GreasyFork Code: Syntax Highlight by CodeMirror

To syntax hightlight GreasyFork Code by CodeMirror

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

// ==UserScript==
// @name        GreasyFork Code: Syntax Highlight by CodeMirror
// @namespace   Violentmonkey Scripts
// @match       https://greatest.deepsurf.us/*
// @grant       none
// @version     0.1.5
// @author      CY Fung
// @description To syntax hightlight GreasyFork Code by CodeMirror
// @run-at      document-start
// @inject-into page
// @unwrap
// @license     MIT
// ==/UserScript==



(() => {
  let byPass = true;

  let documentReady = new Promise(resolve => {
    Promise.resolve().then(() => {
      if (document.readyState !== 'loading') {
        resolve();
      } else {
        window.addEventListener("DOMContentLoaded", resolve, false);
      }
    });
  });

  // Function to load CodeMirror library
  function loadCodeMirror(arr) {


    const promises = arr.map((href) => {
      return new Promise(resolve => {


        const script = document.createElement('script');
        script.src = href;
        script.onload = () => {
          resolve(script);
        };
        document.head.appendChild(script);

      });


    });

    return Promise.all(promises);
  }

  // Function to load CodeMirror CSS
  function loadCodeMirrorCSS(href) {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = href;
    document.head.appendChild(link);
  }

  async function runBlock(codeBlock) {

    let textarea = document.createElement('textarea');
    textarea.value = `${codeBlock.textContent}`;
    textarea.readOnly = true;
    textarea.id = 'editor651';

    textarea.style.width = '100%';
    textarea.style.height = '400px';

    codeBlock.replaceWith(textarea);
    codeBlock.remove();

    await new Promise(r => setTimeout(r, 40));




    let editor651 = CodeMirror.fromTextArea(document.querySelector('#editor651'), {

      mode: "javascript",

      readOnly: true,
      styleActiveLine: true,
      lineNumbers: true,
    });
    editor651.save();







  }

  // Main function to apply CodeMirror syntax highlighting to pre elements
  function applyCodeMirrorSyntaxHighlighting() {
    const codeBlocks = document.querySelectorAll('pre.prettyprint.linenums.lang-js');


    // Check if CodeMirror is loaded
    if (typeof CodeMirror !== 'undefined') {

      codeBlocks.forEach(runBlock);
    } else {
      console.error('CodeMirror library is not loaded. Syntax highlighting cannot be applied.');
    }
  }

  async function doAction() {


    await new Promise(r => setTimeout(r, 20));
 


      document.head.appendChild(document.createElement('style')).textContent = `

          body {

              display: flex;
              flex-direction: column;
              height: 100vh;
          }

          body  > div:last-child{
              height:0;
              flex-grow:1;
              display: flex;
              flex-direction:column;
          }

          body  > div:last-child >  #script-info:last-child{

              height:0;
              flex-grow:1;
              display: flex;
              flex-direction:column;

          }

          body  > div:last-child >  #script-info:last-child > #script-content:last-child{


              height:0;
              flex-grow:1;
              display: flex;
              flex-direction:column;
          }

          body  > div:last-child >  #script-info:last-child > #script-content:last-child > .code-container:last-child{


              height:0;
              flex-grow:1;
              display: flex;
              flex-direction:column;

          }

          body  > div:last-child >  #script-info:last-child > #script-content:last-child > .code-container:last-child > textarea:last-child{


              height:0;
              flex-grow:1;
              display: flex;
              flex-direction:column;

          }

          body  > div:last-child >  #script-info:last-child > #script-content:last-child > .code-container:last-child > .CodeMirror:last-child{


              height:0;
              flex-grow:1;
              display: flex;
              flex-direction:column;

          }

              `;

      await loadCodeMirror(['https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.min.js']);

      await loadCodeMirror([
        'https://cdn.jsdelivr.net/npm/[email protected]/mode/javascript/javascript.min.js',
        'https://cdn.jsdelivr.net/npm/[email protected]/addon/selection/active-line.min.js']);

      loadCodeMirrorCSS('https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.min.css');

      await new Promise(r => setTimeout(r, 20));



      byPass = false;

      applyCodeMirrorSyntaxHighlighting();



 


  }


  let mgg = 0;
  async function mTz() {
    if (mgg) return;
    mgg = 1;
    documentReady.then(doAction);
  }



  function getElementsByTagName(tag) {

    if (byPass) {
      if (tag === 'pre' || tag === 'code' || tag === 'xmp') {
        setTimeout(mTz, 10)
        return [];
      }
    }
    return this.getElementsByTagName331(tag);
  }



  HTMLElement.prototype.getElementsByTagName331 = HTMLElement.prototype.getElementsByTagName
  Document.prototype.getElementsByTagName331 = Document.prototype.getElementsByTagName

  HTMLElement.prototype.getElementsByTagName = getElementsByTagName
  Document.prototype.getElementsByTagName = getElementsByTagName

  /*
  let mz= function(evt){

    if(evt && evt.type ==='readystatechange') return;
    return EventTarget.prototype.addEventListener.apply(this,arguments)

  };
  window.addEventListener = mz
  document.addEventListener = mz;
  */


  documentReady.then(async () => {

    if(location.pathname.endsWith('/code')) return;

    byPass = false;

  });

})();